FontAwesome 5 in Select > Options not working in Firefox

Question

I am using Font Awesome 5 icons in my 'option' and it works in everything but firefox. Has anyone else hit this issue?

.fontAwesomeInOption option{
    font-weight: 900;
}

DropDown of Icons
<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>

<select class="fas fontAwesomeInOption">
    <option value=""></option>
    <option selected value="fas fa-dice-d6">&#xf6d1;&nbsp;Applications</option>
    <option value="fas fa-file">&#xf15b;&nbsp;File</option>
    <option value="fas fa-folder">&#xf07b;&nbsp;Folder</option>
    <option value="fas fa-archive">&#xf187;&nbsp;Archive</option>
    <option value="fas fa-book">&#xf02d;&nbsp;Book</option>
    <option value="fas fa-building">&#xf1ad;&nbsp;Building</option>
    <option value="far fa-warehouse">&#xf494;&nbsp;Warehouse</option>
    <option value="fas fa-city">&#xf64f;&nbsp;City</option>
    <option value="fas fa-map-marked-alt">&#xf5a0;&nbsp;Region</option>
    <option value="fas fa-globe-americas">&#xf57d;&nbsp;Globe</option>
</select>

https://jsfiddle.net/nonoandy/72brmh8w/10/

Yepp. Happens to me as well. Even with the Pro Fonts. Annoys me. Looking for a solution. — Basster, Jun 12 '19 at 09:16
I've got the same problem. Switched over to FA 5 before realizing it doesn't play nice with Firefox; hate to convert everything back. Anyone got a solution? — user1887686, Jul 19 '19 at 16:00
I was unable to find a solution for this :( and ran out of time for the project. — nonoandy, Aug 14 '19 at 18:44
This seems to be a on going issue. https://github.com/FortAwesome/Font-Awesome/issues/996 If I figure a work around one day, I will post it here. — nonoandy, Dec 31 '19 at 15:04

FontAwesome 5 in Select > Options not working in Firefox

0 Answers0