Menu
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/
221
To add icons in select option text we have to use the bootstrap-select plugin, which is a great plugin for customizing plain HTML select with some great customization options using bootstrap style. With this plugin, we can style the select element with only simple data attributes or initialize with Javascript.
fa-caret-down Icon with Fixed Width So to display two icons with fixed width and height we can use fa-fw class. <i class='fas fa-caret-down fa-fw fa-3x'></i>Fixed Width<i class='fas fa-caret-down fa-3x'></i>Normal<br/> <i class='fas fa-home fa-fw fa-3x'></i>Fixed Width<i class='fas fa-home fa-3x'></i>Normal<br/>
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> Now I show the pretty camera!</option>
</select>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
