1

I'd like to show icons from the Fontawesome font in an HTML select. I'm using this CSS for the select:

select {
  font-family: 'FontAwesome', Arial;
}

EDIT: Here is the HTML for the select:

<select>
  <option value="2">&#xf00d; Deny</option>
  <option value="1">&#xf00c; Accept</option>
  <option value="3">&#xf256; Reject</option>
  <option value="4">&#xf040; Accounting</option>
</select>

In Chrome it works fine, but Firefox doesn't render the icons when you open the select, like you can see here:

HTML select different rendering in FF57 and Chrome63

Is Firefox missing that feature or is there something I can do with CSS to solve it?

Thanks,

Fel
  • 4,428
  • 9
  • 43
  • 94
  • Show us code... – Abhishek Pandey Jan 18 '18 at 10:04
  • No. Firefox has that feature. Show your code – vaishali kapadia Jan 18 '18 at 10:04
  • can you provide the full code, from my experience it's better to Unicode value. – pTi Jan 18 '18 at 10:06
  • 1
    Possible duplicate of [FontAwesome doesn't display in Firefox](https://stackoverflow.com/questions/20032426/fontawesome-doesnt-display-in-firefox) – GalAbra Jan 18 '18 at 10:06
  • Does FontAwesome display correctly elsewhere on the page, i.e. in its expected elements. – Mr Lister Jan 18 '18 at 10:19
  • I've read the answer mentioned above and it says that "Firefox only allows cross-domain linking of fonts if the server the font is on sends the right CORS headers". I'll save the font files locally and I'll try again to see if it works. I'll tell the results in a bit. Thanks everyone! – Fel Jan 18 '18 at 10:19
  • @MrLister: yes, all the icons used in the web page display correctly in every browser. It's only when I expand the select that they are not showing. – Fel Jan 18 '18 at 10:23
  • 1
    As a workaround, you can use the non-FontAwesome versions of those characters. https://jsfiddle.net/MrLister/21uyq1vx/3/ – Mr Lister Jan 18 '18 at 13:50
  • As an update, I stored the Font Awesome bundle locally to see if Firefox had any trouble with cross-domain linking of fonts but it didn't make any difference. So, I've used the code you wrote on Fiddle and it works in all browsers, so I'm happy with it, thanks! – Fel Jan 19 '18 at 11:22

0 Answers0