27

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.

Community
  • 1
  • 1
stevenvh
  • 2,971
  • 9
  • 41
  • 54
  • I had the same problem than i looked at the debugger in firefox , it seems that there is some cross origin issue . "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource" So make sure that you are requesting font files from the same path including http ://www. n/or simple http :// : So if website address is http ://domain.tld you must include css src from the same path so the fonts can be correctly accessed by the browser . I hope this helps ! – Alin Razvan Dec 10 '14 at 11:17
  • Nicely explained here: http://code-epicenter.com/font-awesome-is-not-showingworking-in-mozilla-firefox/ – MrD Aug 27 '15 at 14:11

7 Answers7

50

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.

Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
Michał Rybak
  • 8,648
  • 3
  • 42
  • 54
  • Yes, I tried Bootstrap CDN, but that didn't work either. Thanks for your reply anyway. – stevenvh Nov 18 '13 at 09:44
  • 1
    Can you post a link to your website? – Michał Rybak Nov 18 '13 at 15:16
  • [this page](http://zorl.net/fa_cdn.php) is stripped to the bare essentials and uses the Bootstrap CDN. Doesn't work. Apparently, when I do the same for the [locally installed FA](http://zorl.net/fa_local.php), it *does* work. – stevenvh Nov 21 '13 at 10:29
  • [This page](http://zorl.net/index_fa.php) shows the (big) icon correctly, while [this page](http://www.zorl.net/indext.php) doesn't. Note that the contents of both pages are **identical**. I already cleared Firefox' cache, but no avail... – stevenvh Nov 21 '13 at 10:31
  • For me (Firefox 21.0, Linux) [CDN version](http://zorl.net/fa_cdn.php) works perfectly. Three other links (installed locally) work only **without "www." prefix** - I mean http://zorl.net/index_fa.php works, but http://www.zorl.net/index_fa.php **doesn't**. I think this is the right direction to dig, maybe you should ask another question? – Michał Rybak Nov 21 '13 at 10:47
  • Michal, the www subdomain seems to be the culprit. So "cross-domain" seems to include subdomains too. If you add it to your answer I'll accept it. Thanks for your time. – stevenvh Nov 21 '13 at 17:24
  • This issue also caused our FontAwesome icons to not render in FireFox. They did work Using the CDN (which sent the correct headers) – Kwaak Apr 25 '14 at 08:31
  • This CDN worked for me - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css – Moin Haidar Jul 25 '14 at 10:47
  • https://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/ this link explains how to get it working on a server – Binil Jacob Nov 23 '16 at 12:34
1

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
}
cokeman19
  • 2,405
  • 1
  • 25
  • 40
user12541389
  • 11
  • 1
0

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.

Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
Bora Alp Arat
  • 2,185
  • 3
  • 16
  • 21
  • if both font and page are served from same server (according to OP), how is it related to cross-origin? – AaA Sep 30 '19 at 09:48
  • In this case server is an abstract concept; they both can be served on same IP or web server but it does not make them tied. Consider a hosting company serving many domains. I would not want my domain reachable by others on the same IP. Domain level restriction is a standard. Only sub-domains can be exceptions to some extend. – Bora Alp Arat Oct 05 '19 at 09:46
0

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"
user3539950
  • 1
0

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.

Vilma Sherin
  • 1
0
some-class-name:before
{
  content: attr(\f021);
}

worked for me

Iva
  • 1
-11

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

fa fa-envelope

and will work great..

Greetings.

Lmartinez
  • 1