龙笑天龙笑天  2016-05-27 06:16 龙笑天下 隐藏边栏 |   24 条评论  2,214 
文章评分 28 次,平均分 5.0

很久之前就发现了一个问题,在 Firefox火狐中,部分 Font Awesome 在 Firefox 中会不显示(如下图 1);其它浏览器则没有此问题...

图 1:部分 Font Awesome 图标在 Firefox 中不显示问题解决方法

在网上找了很久,几乎都是这个方法:《Apache、Nginx 下 Font Awesome 在 Firefox 中不显示问题解决方法》。具体方法如下面的一和二。

一、Nginx 服务器解决方法

服务器使用的是 Nginx,要在响应的头部添加 Access-Control-Allow-Origin 字段,添加方法是用 add_header 指令(配置例子):

location /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
    add_header Access-Control-Allow-Origin *;
}

二、Apache 服务器解决方法

Font Awesome (firefox 无法显示 火狐无法显示)Cross domain (跨域问题)

The problem

It seems that, for security reasons, Firefox simply don't allow you to use by default a font that is not hosted on your domain, not even on your subdomain. The CDN based websites can be also affected in this case.

The solution

After some investigations, I found out the workaround: set a Access-Control-Allow-Origin header to the font. (Apache)


<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Also, if you are using nginx as your webserver you will need to include the code below in your virtual host file:(Nginx)

location ~* \.(eot|otf|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

三、我的解决方法

我也按照上面的方法做了,结果还是不行...

无意间发现,禁用DW Question & Answer问答中心插件,刷新页面后 font awesome 图标又正常显示了(ps:使用tinection主题或其它主题,使用了 DWQA 问答中心插件的朋友,可用 Firefox 打开你的网站看看是否有这个问题哦!)。但还是不知道什么原因导致的!

前几天搜索关于 font awesome 图标如何使用时,看到了这篇文章:《关于 nginx 环境下 bootstrap 中 font-awesome 图标不显示的问题》,这篇文章里面提到了“font awesome 引用字体的参数导致的该问题”提醒了我,我查看了下网页源代码,搜索font-awesome时,发现了 dwqa 问答中心插件也引用了 font-awesome 图标文件,确实有个字体参数如下图中的?ver=4.0.3(如下图 2),于是查到了主题中 font awesome 图标的字体版本号为 4.2.0;两者版本号不一致,可能正是这个导致的。

图 2:部分 Font Awesome 图标在 Firefox 中不显示问题解决方法

然后,我将主题中的 font awesome 图标相关文件覆盖掉了 dwqa 问答中心插件的 font awesome 文件。文件的具体路径已经指出了,如下图 3:将主题中的文件覆盖掉插件中红圈文件夹中的相应文件(注意备好份哦,有问题好恢复)。

图 3:部分 Font Awesome 图标在 Firefox 中不显示问题解决方法

最后,在修改插件里的一个小地方,文件路径为:\dw-question-answer\inc\Template.php,将文件中的4.0.3修改为4.2.0(具体版本号跟主题 font awesome 字体图标 css 的版本号一致)。

好了,大功告成!给个图 4 先(使用 Firefox 的朋友也可以打开本站看下效果)。

图 4:部分 Font Awesome 图标在 Firefox 中不显示问题解决方法

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

龙笑天
龙笑天 关注:32    粉丝:41 最后编辑于:2016-05-31
互助分享,互联网本该如此!

发表评论

最赞评论
  1. 龙笑天
    龙笑天 永久会员 博主 来自天朝的朋友 火狐浏览器 Windows 7

    @成航先森尝试一下另外 2 个个人定制版的 Firefox,感受下火狐的强大吧!对于喜欢折腾的人来说,用上她就绝对离不开她了!

    Firefox 阳光盒子高效增强版
    RunningCheese Firefox V7

  2. 龙笑天
    龙笑天 永久会员 博主 来自天朝的朋友 火狐浏览器 Windows 7

    @boke112导航不一定非得是这个问答插件哦!其它引用了 font awesome 图标的插件都有可能和主题的 font awesome 相冲突,这是一个参考~~

  3. 小萝博客
    小萝博客 评论达人 LV.2 来自天朝的朋友 谷歌浏览器 50.0.2661.94 Windows 7 广东省珠海市 电信

    我说怎么显示不出来了呢,学习了

  1. 云落
    云落 来自天朝的朋友 谷歌浏览器 63.0.3239.132 Windows 10 江苏省淮安市 电信

    没事瞎溜达,这个问题我看到你的第一个截图就知道怎么回事了,Git 原来内置的字体版本还是 4.1 的,前几天才升级到最新版的 4.7,其实对我个人来说更喜欢自己定制的字体

    11楼 2018-02-05 20:29
扫一扫二维码分享