FontAwesome doesn't display in Firefox

2019-01-22 08:01发布

站内问答 / 前端开发
1571 5 6

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.

5条回答
萌系小妹纸
2楼-- · 2019-01-22 08:14

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) 举报
戒情不戒烟
3楼-- · 2019-01-22 08:14

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) 举报
Juvenile、少年°
4楼-- · 2019-01-22 08:18

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) 举报
在下西门庆
5楼-- · 2019-01-22 08:24

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) 举报
疯言疯语
6楼-- · 2019-01-22 08:24

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)