FontAwesome doesn't display in Firefox

前端未结

关注

 6  1952

余生分开走

相关标签:

6条回答

情深已故

2020-12-08 08:39
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

悲哀的现实

2020-12-08 08:40

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
}

0 讨论(0)

我寻月下人不归

2020-12-08 08:43

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
花落未央

2020-12-08 08:44

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

fa fa-envelope

and will work great..

Greetings.

0 讨论(0)
发布评论:

提交评论
- 加载中...
再見小時候

2020-12-08 08:51
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"
0 讨论(0)
发布评论:

提交评论
- 加载中...
情话喂你

2020-12-08 08:52
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...