CODEWITHSUNDEEP
firefoxfont-awesome
stevenvh
stevenvh

Reputation: 3139

FontAwesome doesn't display in Firefox

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.

Upvotes: 27

Views: 57238

Answers (7)

Bora Alp Arat
Bora Alp Arat

Reputation: 2412

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.

example.com/font-awesome.woff

boo.example/index.htm

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

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

or

Access-Control-Allow-Origin = "*"

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

Upvotes: 0

Michał Rybak
Michał Rybak

Reputation: 8706

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 example.com may be unaccessible from www.example.com, if www.example.com doesn't send the right headers.

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

Upvotes: 51

Iva
Iva

Reputation: 1

some-class-name:before
{
  content: attr(\f021);
}

worked for me

Upvotes: 0

user12541389
user12541389

Reputation: 11

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
}

Upvotes: 1

Vilma Sherin
Vilma Sherin

Reputation: 1

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.

Upvotes: 0

user3539950
user3539950

Reputation: 1

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"

Upvotes: 0

Lmartinez
Lmartinez

Reputation: 1

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

fa fa-envelope

and will work great..

Greetings.

Upvotes: -11

Related Questions