Bootstrap-select: data-icon with FontAwesome (or any other)

Created on 12 Jul 2014 · 6Comments · Source: snapappointments/bootstrap-select

Is there a chance we could use any other type of font icon instead of the pre built Bootstrap glyphs?

If so, how would one use them? Example?

Source

sirNemanjapro

Most helpful comment

Looks like I need to update the documentation.

Set the iconBase and tickIcon options to customize the font used. Default is glyphicon. To use FontAwesome:

$('.selectpicker').selectpicker({
    iconBase: 'fa',
    tickIcon: 'fa-check'
});

430

caseyjhol on 13 Jul 2014

👍11

All 6 comments

Looks like I need to update the documentation.

Set the iconBase and tickIcon options to customize the font used. Default is glyphicon. To use FontAwesome:

$('.selectpicker').selectpicker({
    iconBase: 'fa',
    tickIcon: 'fa-check'
});

430

caseyjhol on 13 Jul 2014

👍11

I am having this issue too. Is it possible to use font awesome with the "data-icon" attribute? Not trying to overload iconbase or tick icon. Trying to make individual option icons use font-awesome.

sovtek on 23 Jan 2017

Agreed with @sovtek , I would also like to put font-awesome icons into the data-icon attribute...

rjmd on 28 Aug 2017

data-icon simply creates a span element with a class that is whatever you've set data-icon to. So, if you want Font Awesome, simply set data-icon="fa-heart". That would result in <span class="fa fa-heart"></span>.

caseyjhol on 28 Aug 2017

👍3

Thanks @caseyjhol, the only issue with this solution is that I want the icon to be colored depending on the item in the list.

rjmd on 7 Sep 2017

(Bootstrap ^4.., bootstrap-select ^v1.13.2) I think I found a solution. Just add the "fa" into data-icon attribute before the fa-"your icon name", like this:

<select class="selectpicker" data-live-search="true" data-iconBase="fa" data-tickIcon="fa-check" multiple>
    <option data-icon="fa fa-phone" value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>