CODEWITHSUNDEEP
htmlfont-awesomehtml-select
Dilip Hirapara
Dilip Hirapara

Reputation: 15296

Font Awesome unicode icon is not working in firefox

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.

enter image description here

But in firefox not working.

enter image description here

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/

Upvotes: 8

Views: 5134

Answers (3)

MBaas
MBaas

Reputation: 7530

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.

Upvotes: 5

Ekynos
Ekynos

Reputation: 51

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

Upvotes: 5

Naman Sandilya
Naman Sandilya

Reputation: 27

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

Upvotes: 1

Related Questions