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/

I've made a JSFiddle and can confirm what you found, it works in Chrome, but not in Firefox: https://jsfiddle.net/KIKO_Software/9dz8a5kc/1/ — KIKO Software, Aug 09 '19 at 12:56
Oddly, it's fine after you select the option, but not while you are viewing the list. By the way, same issue in Safari. — aynber, Aug 09 '19 at 12:58
Thank you for your answer KIKo. Here i've added firefox image in that image you can see Yes(FOOC) something. — Dilip Hirapara, Aug 09 '19 at 12:58
I did find this question, it seems related, but is unanswered: https://stackoverflow.com/questions/39884774/css-font-family-support-dropped-for-select-in-firefox It seems to be a bug. — KIKO Software, Aug 09 '19 at 12:59
Based on the jsfiddle, it doesn't work for me in Chrome either. To ensure crossbrowser-safety here, maybe you should try using Select2, or some other third party improvement on the default select-boxes. — Andrew, Aug 09 '19 at 13:12
A simple alternative is to use unicode characters [CHECK MARK](https://www.fileformat.info/info/unicode/char/2713/index.htm) and [MULTIPLICATION X](https://www.fileformat.info/info/unicode/char/2715/index.htm) — cdalxndr, Nov 04 '19 at 20:57

score 5 · Answer 1 · answered Aug 09 '19 at 13:53

5

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

answered Aug 09 '19 at 13:53

Ekynos

51
4

Thank you for your answer, your answer is working if I use `multiple` but if I remove `multiple` same issue occuring. – Dilip Hirapara Aug 09 '19 at 13:59
If you want cross-browser functionality, I'm afraid you will have to implement an own dropdown solution, or just use an existing solution from a library like Bootstrap or jQuery. Just as the last comment in the issues section on GitHub states: "Please implement a JavaScript solution if you want this to work across browsers and platforms" – Ekynos Aug 09 '19 at 14:06
It means i've to use another library for it like boostrap-select https://developer.snapappointments.com/bootstrap-select/examples/ right? – Dilip Hirapara Aug 09 '19 at 14:09
No, unfortunately that plugin still uses a select tag, which means ultimately you'll end up with the same problem. But there are many working solutions with list tags (ul, li), like in vanilla Bootstrap: (https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp) – Ekynos Aug 09 '19 at 14:38

score 5 · Accepted Answer · edited Nov 05 '19 at 00:17

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.

Thank you for your answer let me test with it. – Dilip Hirapara Aug 10 '19 at 14:17 — Dilip Hirapara, Aug 10 '19 at 14:17

score 1 · Answer 3 · answered Aug 09 '19 at 13:45

1

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

answered Aug 09 '19 at 13:45

Naman Sandilya

27
1
2

Thank you for your answer, I don't know more about webkit. can you made for select tag which will working for firefox? – Dilip Hirapara Aug 09 '19 at 14:00

Font Awesome unicode icon is not working in firefox

3 Answers3

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

Solution: declare font-face

Possible explanation

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

Solution: declare `font-face`