Font awesome not displaying properly on Firefox

Question

I am trying to use a font awesome icon in a widget that is installed on a customers website. The font awesome icons displays correctly in Safari and Chrome but doesnt in Firefo

Answer 1

Use direct link for including css files , also make sure you don't get a cross-domain error in the debugging console .

For example when you access your website from :

http://www.domain.tld make sure you link css file from the same path including www

like so : http://www.domain.tld/css/style.css

and when you access from http:// > link css files also from that very same path without www.

http://domain.tld/css/style.css

i got that issue some time ago and it was fixed by modifying css paths to request css files from the "same" web address / path .

example: you can view font awesome icons in this path

http://webake.ro/

But not in this one :

http://www.webake.ro/

because the font was linked from within http://domain.tld path without adding www. in the

link href=

Font from origin 'http://webake.ro' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.webake.ro' is therefore not allowed access.

Answer 2

Firefox blocks Cross-Origin Request.

Firefox disallows reading the remote resource due to Same Origin Policy for below CDN:

https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css

I dug little to fix CORS issue instead I replaced above CDN with below one and icons rendering fine:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">

Answer 3

MaxCDN identified and fix this issue. They set the right CORS headers and embedding this line to your website should work:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Answer 4

I notice a strange behaviour, probably related to the firefox security policies. I had the same problems with a project configuration like so:

• /site/html <--- where all the .html files go
• /site/resources/... <--- where all the css, font, img, js stuff goes

now, I included the font-awesome.min.css in an html file located under the /site/html directory and I experimented your problem. But when you download the Font Awesome package it is shipped with html demo files that actually works in firefox. What's the trick?!

Their project structure has the "resources" folder (they call it "assets") nested inside the "html" folder. This seems to calm down the firefox security policy. Finally, my answer is: get a configuration like the following

• /site/html <--- where all the .html files go
• /site/html/resources/... <--- where all the css, font, img, js stuff goes

it worked for me.

Answer 5

If you are hosting your font on S3, you have to enable CORS on the bucket. See my answer to this other question for details

Answer 6

Firefox only allows cross-domain linking of fonts if the server the font is on sends the right CORS headers. And it does this because the spec very clearly says to do it, at http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction