Icon in option - Bootstrap + Font-awsome

html css twitter-bootstrap option font-awesome
monokh picture monokh · May 13, 2013 · Viewed 39.8k times · Source

I am trying to embed an icon in an option from a select list. Using font-awesome icons, no icon is being displayed.

<select>
    <option><i class="icon-camera-retro"></i> Doesn't work in option!</option>
</select>

Can i use font-awesome to achieve what i need? Or do i have to scrap using font-awesome and do a manual CSS background for each option?

JSFiddle: http://jsfiddle.net/mmXh2/1/

Answer

Sanojian picture Sanojian · Oct 11, 2013

You can use FontAwesome as a unicode font and insert your icons in a cross-platform way. You just need to look up the unicode value for each icon

<select style="font-family: 'FontAwesome', Helvetica;">
    <option>&#xf083; Now I show the pretty camera!</option>
</select>

Related questions

vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More
Text-align class for inside a table

Is there a set of classes in Twitter's Bootstrap framework that aligns text? For example, I have some tables with $ totals that I want aligned to the right... <th class="align-right">Total</th> and <td …

Read More
Bootstrap NavBar with left, center or right aligned items

In Bootstrap, what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right? Here is what I've tried so far, and it …

Read More