gravatar头像龙笑天  6个月前 (05-26) 来源:龙笑天下 隐藏边栏 |   22 条评论  237 
文章评分 25 次,平均分 5.0

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

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

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

一、Nginx服务器解决方法

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

二、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)

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

三、我的解决方法

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

无意间发现,禁用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 中不显示问题解决方法

 

除特别注明外,本站所有文章均为龙笑天下原创,转载请注明出处来自http://www.ilxtx.com/problem-about-font-awesome-in-firefox.html

gravatar头像
龙笑天 最后编辑于:2016-05-31
互助分享,互联网本该如此!

发表评论

表情 链接 贴图 私信 格式 签到

最赞评论
  1. gravatar头像
    龙笑天 年费会员 博 主

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

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

    2016-05-29 23:01
    8 0
  2. gravatar头像
    龙笑天 年费会员 博 主

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

    2016-05-27 12:40
    7 0
  3. gravatar头像
    小萝博客 评论达人 LV.2 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

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

    2016-05-28 19:21
    4 0
  1. gravatar头像
    夏天烤洋芋 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 Windows 10 云南省昆明市 电信

    是怎么把优酷的视频框在你网站的。

    10楼 2016-05-31 13:12
    0 0 回复
  2. gravatar头像
    小C博客 来自天朝的朋友 QQ浏览器 Windows 7 浙江省杭州市 电信

    用习惯Chrome,没用火狐,一会去试试看是否有这个问题!

    9楼 2016-05-30 19:52
    0 0 回复
  3. gravatar头像
    themebetter 来自天朝的朋友 谷歌浏览器 Windows 10 河南省新乡市 联通

    我们themebetter网站最近新出了一款wordpress主题,欢迎去看看!http://themebetter.com/theme/tob

    8楼 2016-05-30 17:06
    0 0 回复
  4. gravatar头像
    成航先森 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 Windows 7 四川省成都市 联通

    不怎么喜欢用火狐、、、、

    7楼 2016-05-29 22:02
    0 0 回复
  5. gravatar头像
    小萝博客 评论达人 LV.2 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

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

    6楼 2016-05-28 19:21
    4 0 回复
  6. gravatar头像
    真我风采 评论达人 LV.2 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省南通市 联通

    感觉火狐比谷歌的问题要多。

    5楼 2016-05-28 17:28
    0 0 回复
  7. gravatar头像
    好书推荐 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 电信

    你这页面太花了、以为是一些电影推荐呢 [呲牙]

    4楼 2016-05-28 11:58
    0 0 回复
  8. gravatar头像
    Koolight 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 星缘新动力科技有限公司电信节点

    真没想到原来是版本号问题,哈哈~

    地板 2016-05-27 23:02
    1 0 回复
  9. gravatar头像
    微西风博客 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省十堰市 电信

    现在浏览器种类太多,每个种类用的人也多,做个网页想要适应各种浏览器很难搞

    板凳 2016-05-27 18:00
    0 0 回复
  10. gravatar头像
    boke112导航 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 电信

    换句话就是说,如果没有使用这个问答插件,一般都不会有事也不用折腾了 [呲牙]

    沙发 2016-05-27 8:53
    0 0 回复
    • gravatar头像
      龙笑天 年费会员 博 主

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

      2016-05-27 12:40
      7 0 回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录。
快捷登录后,请完善资料中的电子邮件地址,可及时收到回复邮件通知和用于登录!

切换登录

注册

扫一扫二维码分享