Font-awesome: Can't use FontAwesome as a select option in Safari, Chrome, Firefox (OSX / Linux / Android)

[evenicoulddoit]

What you're doing is not possible due to the option tag only being allowed to contain text (see here).

However, FontAwesome is a unicode font based iconset, and so it is possible to include an icon in an option, or a select list, simply by referencing it's unicode character directly.

[davegandy]

Great solution @evenicoulddoit As this is not a bug I can fix, I'm closing.

[djonatanb]

Any idea why it wouldn't work for me? it is rendering an empty square, I'm using the custom package with selected icons only. Might be it?

[evenicoulddoit]

Did you copy my example verbatim? You need to set the font-family on the select to be 'FontAwesome' followed by some other font.

[djonatanb]

I wasn't setting the second font option, but now I setted and doesn't make any difference. I should just try with the complete set to see if it's not because of the custom package.

It worked with the complete package. Thanks, very good to see I can do it.

[dmassari]

Does anyone knows why in my case, after loading the select, the letter "o" is not being showed? Any reason?
My select is something like this:

[tagliala]

Can't reproduce (w7x64 - chrome/firefox/ie10): http://jsfiddle.net/tagliala/4SyKN/

Can you please provide a fiddle?

[nathancolgate]

Styling of options is inconsistent across browsers.

I ended up using https://github.com/ivaynberg/select2 to render my selects in such a way that I could maintain control of the styling (and thus assign the FontAwesome font-family)

[thewebsitedev]

@tagliala icons not displaying on chrome and safari when selecting an option, any fix for it? Though works fine in firefox.

[tagliala]

@gthapar confirm.

Sorry I don't think I can fix this. If anyone is able please update my above field

BTW please consider plugins like select2, as @nathancolgate pointed out

[diegofer]

unicode definitely, it doesn't work in chrome...

[ghost]

I have managed to find a way around this.
The solution is to use this plugin:
http://silviomoreto.github.io/bootstrap-select/

There's an option to use the attribute data-content. So, using this, we form an array of items:
http://pastebin.com/rFkUjeKZ

Use this array to form your Options.

This is how it looks:

[tagliala]

@depija please edit your post using a gist or proper markdown

[kaidesu]

There is no need to go through the lengthy process of using a plugin for this. Simply add the FontAwesome font to the CSS class for your select method.

JSFiddle Example: http://jsfiddle.net/NyL7d/

[ghost]

@kaidesu solution is way better. :+1:

[pagelab]

@kaidesu The JSFiddle didn't work for me in latest Chrome, Safari and Opera (Mac). In Firefox is ok.

[tagliala]

@pagelab @kaidesu confirm on OSX 10.9.

Windows is fine instead

[wolfram77]

the solution worked. i tried:

<select class="fa">
<option value="0" selected> &#xf201; Chart</option>
...
</select>

which also worked.

[bsohlml]

This does not work for me on the Mac (10.10, Chrome or Safari). The icons in the dropdown option list show with the same broken icon as @tagliala showed. Once an item is selected however, the correct icon does appear in the select control itself. Has anyone found a solution/workaround for this? Thanks!

[davidpatters0n]

any news on the above ^^ ? Thank you

[Kae2312]

Has anyone found a solution? Thanks!

[shaununderwood]

Seems this is still in error; the error icon shows in the dropdown but thankfully renders correct in the selection box. I'm not in favour to use a 3rd party component to overcome this simple issue.

[tagliala]

@shaununderwood this issue does not depend on Font Awesome:

http://jsfiddle.net/tagliala/9qg96Lna/ (no fontawesome here)

Maybe webkit based browsers on OSX have some issues with PUA in select and option tags. Font Awesome uses PUA by design. You can customize the font and bring glyphs outside of the PUA if you need to address this issue

New browser test on http://jsfiddle.net/NyL7d/:
:white_check_mark: Chrome 46 / Win 10
:white_check_mark: Firefox 42 / Win 10
:white_check_mark: IE 11 / Win 10
:white_check_mark: MS Edge 13 / Win 10

:white_check_mark: Firefox 42 / OSX 10.11.1
:x: Chrome 46 / OSX 10.11.1
:x: Safari 9.0.1 / OSX 10.11.1

[shaununderwood]

I've raised the issue here https://code.google.com/p/chromium/issues/detail?id=568116 i hope its the right place to do that. I'm sure we'll find out.

[tagliala]

@shaununderwood thanks!

let's wait for an answer

[tagliala]

https://code.google.com/p/chromium/issues/detail?id=568116

Answer:

Popups on OSX and Android don't support WebFonts now.

Font Awesome is a WebFont, so we cannot fix this on our side.

Please consider a javascript solution if you want this to work across browsers and platforms

[shaununderwood]

Ah, not WebFonts. ... font-family is not supported.

Well isn't that just dandy.

[ghost]

Found a fairly organic workaround. A multi-select will display the font icons properly across all browsers. A little Javascript would allow you to restrict a multi-select to one value, if need be.

[Jngai]

@joeshelton1020 can you post that solution?

[ghost]

HTML would be

<select multiple name="icon" size="8" style="font-family: FontAwesome, sans-serif;">
<option value="fa-500px">&#xf26e; 500px</option>
<option value="fa-adjust">&#xf042; Adjust</option>
<option value="fa-adn">&#xf170; Adn</option>
<option value="fa-align-center">&#xf037; Align-center</option>
<option value="fa-align-justify">&#xf039; Align-justify</option>
<option value="fa-align-left">&#xf036; Align-left</option>
<option value="fa-align-right">&#xf038; Align-right</option>
<option value="fa-amazon">&#xf270; Amazon</option>
<option value="fa-ambulance">&#xf0f9; Ambulance</option>
<option value="fa-anchor">&#xf13d; Anchor</option>
<option value="fa-android">&#xf17b; Android</option>
<option value="fa-angellist">&#xf209; Angellist</option>
...
</select>

[ybrodsky]

@joeshelton1020 Solution works like a charm

http://plnkr.co/edit/w6iyH1k912np1z2BYNro?p=preview

[ybrodsky]

Updated

[Jngai]

I couldn't use the html version because I was incorporating this into a rails app. I had to do it the rails way.

My select looks like this. I am using select2 with font awesome and on top with rails form_for select/options for select helpers.

  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <div>
          <%= f.label :icon %>
          <%= f.select(:icon, options_for_select([["Adjust", "fa fa-adjust", {"data-icon" => "fa-adjust"}],
              ["Camera", "fa fa-camera", {"data-icon" => "fa-camera" }], ["Anchor", "fa fa-anchor", {"data-icon" => "fa-anchor" }], ["Archive", "fa fa-archive", {'data-icon'=> "fa-archive" }], ["Asterisk", "fa fa-asterisk", {'data-icon' => "fa-asterisk" }], ["Adn", "fa fa-adn", {'data-icon' => "fa-adn" }],["Bell", "fa fa-bell", {'data-icon' => "fa-bell" }], ["Bicycle", "fa fa-bicycle", {'data-icon' => "fa-bicycle" }]]), {},
              {:style => "font-family:'FontAwesome', Arial;", :class => 'js-example-basic-single'}) %>
        </div>
      </div>
    </div>
  </div>

Here is my coffee script file to set the format of the select2 box

format = (icon) ->
  originalOption = icon.element
  '<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text

$(document).ready ->
  $('.js-example-basic-single').select2
    width: '100%'
    formatResult: format

This also made the dropdown box render the icons perfectly.

[PeterShaggyNoble]

@joeshelton1020 & @ybrodsky, you're missing the semi-colons to close out the entities; you might encounter problems in some browsers without them.

Also, for people using this method, please bear in mind that it breaks the ability to select an option using your keyboard.

[dantheman999301]

In case anyone else is having this issue, we found that if you add some border style it can actually fix the issue.

http://jsfiddle.net/6Lquvcr8/

When expanded the icons are there.

[tagliala]

When expanded the icons are there.

Not there. OSX 10.11.4, Chrome 50

[dantheman999301]

How bizarre. Looks like this on our Mac.

And our OS and browser versions

[tagliala]

Maybe this is some retina-stuff involved.

It doesn't work on my non-retina MacbBook Air mid '13

[petogriac]

I am struggling with the same issue. As mentioned above Chrome and Safari on Mac doesnt show the dropdown menu with custom icons. The workaround I ended up using at the end is the bootstrap dropdown (like this one: http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp) and then you are able to add custom icons for the <li> tags.

[ankitgarg306]

See this link have the solution:-
http://ankithackingtips.blogspot.in/2017/01/font-awsome-in-dropdown.html

[tagliala]

@ankitgarg306 unfortunately that solution is not cross platform. Please take another look at: https://bugs.chromium.org/p/chromium/issues/detail?id=568116

[Syirrus]

Yeah, I'm having the same problem with a Cordova app and Chrome on Mac.

[tagliala]

https://code.google.com/p/chromium/issues/detail?id=568116

Popups on OSX and Android don't support WebFonts now.

https://bugs.chromium.org/p/chromium/issues/detail?id=568116#c2

Ah, not WebFonts. Anyway, font-family is not supported.

Please implement a JavaScript solution if you want this to work across browsers and platforms

🔒