FontAwesome doesn't display in Firefox

StackOverflow https://stackoverflow.com//questions/20032426

  •  21-12-2019
  •  | 
  •  

Question

Related question here.

Boris' answer to the above question seems to make sense, but I installed the Font Awesome files on my server and the problem remains:

enter image description here

I looked into the library and found that the font files are included in the install, so the argument about cross-server access to fonts doesn't seem valid. I don't mind using the BootstrapCDN, but then Boris' suggestion seems to apply, and I don't know how to send the right CORS headers. (I tried it, but it doesn't work either.) Any idea how I can fix this, either using the "Bootstrap CDN" or the "default CSS"? (see also these instructions.)

PS: IE10 shows the glyph correctly.

Was it helpful?

Solution

Did you try Bootstrap CDN?

Just include <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> in your <head> section. Font files will be loaded automatically from CDN, too.

Checked this on Firefox and it works perfectly.

@Boris says:

Firefox only allows cross-domain linking of fonts if the server the font is on sends the right CORS headers.

So it's clear that it's CDNs duty to set the right headers, not yours. And them seem to do that correctly, because Firefox doesn't complain.

If you host fonts on your own server, keep in mind that cross-domain rule may still apply, e.g. font files places under domain.com may be unaccessible from www.domain.com, if www.domain.com doesn't send the right headers.

Read this answer for tips about bypassing cross-sub-domain restrictions - this might help in your case.

OTHER TIPS

If you are the owner of your own server, you can add a http header to deal with that problem. Problem based on cross domain policies.

foo.com/font-awesome.woff

boo.com/index.htm

in that case you should add that header to foo.com

Access-Control-Allow-Origin = "http://boo.com"

or

Access-Control-Allow-Origin = "*"

that will make your font file reachable from other sites or specific site.

I am having same issue, we use the fonts on router board using micro httpd. i added Access-Control-Allow-Origin: * header but not working for me.

i found in firebug that the woff file is not returing anything in response text. the same thing if i use CDN url, everything works fine. so on local micro-httpd server need some mandatory header to configure. please tell me also the exact mime types for all fonts needed.

  • .ttf", "application/x-font-ttf"
  • .eot", "application/vnd.ms-fontobject"
  • .woff", "application/font-woff"
  • .svg", "image/svg+xml"

solution to make the fontawesome css work locally is to include the files under Fonts folder into the same directory of .html files(pages).

eg:File structure as of now where fontawesome is not working

    prototype\pages\.html files
    prototype\styles\font-awesome\css\font-awesome.min.css
    prototype\styles\font-awesome\css\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff

The issue here is that for a page loaded from a file:// URI, only files in (or below) the same directory of the filesystem are considered to be "same origin", and so putting the font in a different subtree (../font/) means it will be blocked by security policy restrictions.As Firefox disables cross-domain fonts "by default. Instead change the file structure as below:

      prototype\pages\.html files
      prototype\styles\font-awesome\css\font-awesome.min.css
     prototype\pages\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff

place the fonts folder under pages directory which fixes the issue.Hope it helps.

Put in a custom CSS the following (for me it solved the problem):

@font-face
{
  font-family:'FontAwesome';
  src:url('./fontawesome-webfont.eot');
  src:url('./fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
  url('./fontawesome-webfont.woff') format('woff'),
  url('./fontawesome-webfont.ttf') format('truetype'),
  url('./fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight:normal;
  font-style:normal
}

[class^="icon-"]:before,
[class*=" icon-"]:before
{
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  text-decoration:inherit
}

Be sure your paths are correct. Use the fa class and the icon class like:

fa fa-envelope

and will work great..

Greetings.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top