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/

I think there is more simple solutions, but you can have a look at this amazing jquery plugins: http://ivaynberg.github.io/select2/index.html, the templating part can interest you. — Getz, May 13 '13 at 15:26
Check this http://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list — PSL, May 13 '13 at 15:33
@PSL I actually saw that before i posted thats why i mentioned 'a manual CSS background for each option' but I would prefer to use the font-awesome framework. — monokh, May 13 '13 at 15:58

score 19 · Answer 1 · answered Oct 11 '13 at 11:51

19

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>

answered Oct 11 '13 at 11:51

Sanojian

199
1
3

7

Doesn't work in Chrome, Safari and Opera (Mac) [JSFiddle](http://jsfiddle.net/PageLab/y49pd/) – Marcio Duarte Apr 06 '14 at 15:21
I don't have a Mac but it should work there. Can anyone confirm this? – Sanojian Apr 09 '14 at 08:32
On a Mac, it works only in Firefox. This is being tracked in [Github](https://github.com/FortAwesome/Font-Awesome/issues/996) also: – Marcio Duarte Apr 09 '14 at 11:39
1

Firefox is still the best. That settles it. – Darth Egregious Apr 14 '15 at 15:55
Works in Chrome/windows 7 here. But get this: It also works in IE10, but only when showing the selected option, when the select is collapsed. The option list itself has no Icons... Quirky! – jumps4fun Nov 12 '15 at 13:32

score 5 · Answer 2 · answered May 13 '13 at 15:22

5

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>

answered May 13 '13 at 15:22

Billy Moat

20,792
7
45
37

2

Yeah, you're right. I knocked it up in Firefox and it works there but not in Chrome. Ah well. – Billy Moat May 13 '13 at 15:32
Thanks for the solution, i tried this in chrome originally and thought it didn't work, but would need a cross browser solution. I think i have to go for a simple background image – monokh May 13 '13 at 16:01

score 2 · Answer 3 · answered May 27 '13 at 18:51

Apparently Select2 (http://ivaynberg.github.io/select2/) is a solution to putting icons in option tags. However, perhaps due to my lack of knowledge, I just couldn't make it work. In the end I resorted to using lists (I was also using Bootstrap)

<a class="btn dropdown-toggle category" data-toggle="dropdown" href="#">All Categories <span class="caret pull-right"></span></a>
<ul id="category" class="dropdown-menu">
    <li><a href="#"><i class="icon"></i> Category A</a></li>
    <li><a href="#"><i class="icon"></i> Category B</a></li>
    ..
</ul>

There is a drawback though, the id of the list has to be unique. So, if like me you had 5 different lists in one page, you have to declare (?) all of them in javascript making the codes chunky.

$(function(){
  $("#category li a").click(function(){
    $(".category").val($(this).text());
  });
});

Hope that help shed some light.

recently found a way to put icons into – Jennift Jul 05 '13 at 09:48 — Jennift, Jul 05 '13 at 09:48

score 0 · Answer 4 · answered Feb 12 '14 at 03:40

0

Use a plugin like select2

Here's a working jsfiddle

<select id="icon_select" style="width: 150px;"><option value="fa-glass">&amp;#xf000; fa-glass</option>
  <option value="fa-music">&amp;#xf001; fa-music</option>
</select>

answered Feb 12 '14 at 03:40

Jeremy Lynch

6,780
3
52
63

score 0 · Answer 5 · edited May 23 '17 at 12:02

0

A solution for icons working in Chrome has been given on a similar question.

JSFiddle Example

Code used:

function format(icon) {
    var originalOption = icon.element;
    return '<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text;
}
$('.wpmse_select2').select2({
    width: "100%",
    formatResult: format
});

edited May 23 '17 at 12:02

Community

1
1

answered May 28 '16 at 01:36

Jayden Lawson

2,154
2
21
24

Icon in option - Bootstrap + Font-awsome

5 Answers5

Linked