Font Awesome unicode icon is not working in firefox

Unfortunately, this is an old issue with several browsers, especially Firefox on Mac OS X. There is a hack where you add a "multiple" attribute to the select tag, but this will alter the nature of your dropdown box and can result in unwanted input from the users.

 <select multiple class="form-control phone_verified">
  <option value="">Select Option</option>
  <option value="1">Yes (&#xf00c;)</option>
  <option value="0">No (&#xf00d;)</option>
  </select>

Working solution on Fiddle

Issue on Github

I have a workaround, a solution and some reasoning why this is happening...

Workaround: just use any `fa-style on your page.

Example:

https://jsfiddle.net/mbaas/zLapqy3u/

Solution: declare font-face

Add the font-face-declaration from FA's CSS:

@font-face
{
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.6.1') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg');
    src: url('../fonts/fontawesome-webfont.eot?v=4.6.1');
}

Note that you this code refers to some font-files which you will need to provide as well.

Actually...it would recommend to not call this font FontAwesome, because that could overlap with FA and cause unintended side-effects. Better use a unique name. To be clear:

@font-face
{
    font-family: 'FontAwesome_Dilip';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.6.1') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg');
    src: url('../fonts/fontawesome-webfont.eot?v=4.6.1');
}

and

select { font-family: 'FontAwesome_Dilip', 'open sans' }

Also I want to suggest using a specific style for this font-family in preference to applying it to all select-controls.

Possible explanation

It might be some sort of optimization where FF does not bother processing the @font-face-declation from FA-CSS, because it is not used (none of the actual styles from the CSS is referenced.). So then my simple <i class="fa fa-check"></i> fixed it...

Bonus: another advantage of the "private" font-face

As long as you only use yes or no in the select, everything is fine. Try adding the word Keyto your options just to see what's possible (this is an effect which wasn't generally reproducible, but using Chrome I had this very problem. But I'm also using FontAwesome-Font in my Windows-System and I suspect this caused the effect.): you may end up seeing the smybol twice, because "key" is used as a ligature in the font-definition to generate the same symbol. So the advantage of declaring a font-face specifically for that usage is that you can add font-variant-ligatures: none; to the CSS-Style for select to disable ligatures.

What you are looking for is inclusion of -webkit or -moz in your css document. Chrome supports it but for mozilla to support this use "-moz-".

For further information on this go to the link below and you'll find everything related to it!! https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions