Some Font Awesome icons are not shown in Firefox, how to debug?

Question

Edit: solved, see answer below.

I am using several JavaScript-libraries (some of them come with CSS and web fonts) along with Font Awesome. FA is installed locally via Bower, so there are no attempts to cross-site requests made.

Everything works fine in Chrome and IE, but on Firefox there are some icons (fa-user-secret and fa-archive) that are not displayed correctly. They show as some other characters (probably Asian, no idea which language) instead. Most other icons such as fa-user work without problem.

My theory is that there is a collision between FA and some CSS and/or web fonts from one of the other libraries. Perhaps an older FA with the affected icons gets loaded instead of the new FA version. I'm e.g. using dbootstrap (a Bootstrap theme for Dojo) which comes with its own FA - which is prefixed with "icon-" instead of "fa-". Deactivating dbootstrap does not solve the problem.

An example snippet that does not work:

    <i class="fa fa-archive"></i>

An example that works:

    <i class="fa fa-user"></i>

The problem really only appears on Firefox.

I've tried to deactive some other libs and CSS but got stuck in the process.

What is the recommended way to debug such problems?

"dboostrap"? What's that? A search just shows me things about creating boot floppies. — T.J. Crowder, Mar 19 '15 at 09:27
Post an example of the markup you're using that isn't working. — T.J. Crowder, Mar 19 '15 at 09:28
FontAwesome icons not showing when they're in the markup has nothing to do with JavaScript, I've removed the irrelevant tag. — T.J. Crowder, Mar 19 '15 at 09:28
Check this http://stackoverflow.com/q/18376875/20126 possible duplication. — Amr Elgarhy, Mar 19 '15 at 09:29
And this http://stackoverflow.com/questions/16866872/font-awesome-not-working-in-firefox — U r s u s, Mar 19 '15 at 09:29
Firefox prevent cross-domain requests by default. You need to enable CORS or try adding this to your page `` (taken from the link I posted in my previous comment) — U r s u s, Mar 19 '15 at 09:31
dbootstrap is is a Bootstrap theme for Dojo, see https://github.com/martinpengellyphillips/dbootstrap — Hannes Ebner, Mar 19 '15 at 09:36
FA is installed using bower, so everything is served locally. No cross-domain requests are necessary. — Hannes Ebner, Mar 19 '15 at 09:38

Paolo Oprandi · Answer 1 · 2015-09-22T11:06:25.710

1

Check the gfx.downloadable_fonts.enabled pref on the about:config page is set to true (if necessary double-click the line to toggle its value).

Make sure that you allow pages to choose their own fonts.

Tools > Options > Content : Fonts & Colors > Advanced: [X] "Allow pages to choose their own fonts, instead of my selections above"

edited Sep 22 '15 at 11:06

answered Sep 22 '15 at 10:26

Paolo Oprandi

11
3

score 0 · Answer 2 · answered Mar 19 '15 at 09:31

0

Try installing firebug extension on the faulty web browser or use the in built application console and check if the web browser status for the file is 200 OK , also check your application character enconding it should be UTF-8, if that doesn't work then your html markup code is my next bet, go through font awesome docs files and check if you properly implemented it.

answered Mar 19 '15 at 09:31

Kayode Adamolekun

1
1

I don't see any errors in Firebug, encoding seems to be correct too. Please not that fa-user works while fa-user-secret doesn't. – Hannes Ebner Mar 19 '15 at 09:45

score 0 · Answer 3 · answered Mar 19 '15 at 09:35

0

If only some icons are not showing most probably is that you are using a version of fontawesome that deos not contain those icons.

Have you checked if the loaded fontawesome css in Firefox includes the missing icons?

I know that you can see them in IE and Chrome but that may be due to caching...

answered Mar 19 '15 at 09:35

Eduardo Ramos

416
3
8

Yes, checked for that. I am installing FA 4.3.0 via Bower and always test after emptying the browser cache. – Hannes Ebner Mar 19 '15 at 09:52
Could you post the simplest HTML that fails so we can have a look at it? I guess you have tried a plain HTML file with just those two elements to see if it is not a problem of your firefox version/installation... – Eduardo Ramos Mar 19 '15 at 10:35

score 0 · Accepted Answer · answered Mar 19 '15 at 13:21

I found the problem, it was dbootstrap (Bootstrap theme for Dojo) after all. It comes with its own (older) copy of Font Awesome and redefined the font-face FontAwesome in its own CSS.

For some reason this problem only appears on Firefox, probably the load order of CSS and web fonts is slightly different. I removed FA from dbootstrap and now FA works as expected in FA.

score 0 · Answer 5 · answered May 07 '17 at 12:07

0

In my case, just some of the icons were blocked by uBlock Origin, which is still a bit surprising to me -- so it's worth trying to see whether deactivating relevant add-ons can solve the issue.

answered May 07 '17 at 12:07

Martin R.

1,554
17
16

Some Font Awesome icons are not shown in Firefox, how to debug?

5 Answers5