Font Awesome unicode icon is not working in firefox

Question

Here is my html code.

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

I've linked cdn bootstrap link

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<style type="text/css">
  select  {
  font-family: 'FontAwesome', 'open sans'
}
</style>

In my chrome browser icon working perfect.

But in firefox not working.

I followed this font awesome icon in select option

Can anyone tell me what I'm doing wrong?

check JSFiddle Link :- https://jsfiddle.net/17j8pxqb/

Answer 1

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

Answer 2

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 Key to 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.

Answer 3

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