Icon in option - Bootstrap + Font-awsome

Question

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 1

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>

Answer 2

You can cheat a little bit and put the class on the option:

http://jsfiddle.net/mmXh2/2/

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