Firefox中没有显示一些Font Awesome图标,如何调试?

时间:2015-03-19 09:25:34

标签: css firefox fonts font-awesome

编辑:已解决,请参阅下面的答案。

我使用了几个JavaScript库(其中一些带有CSS和Web字体)以及Font Awesome。 FA通过Bower在本地安装,因此不会尝试跨站点请求。

在Chrome和IE中一切正常,但在Firefox上有一些图标(fa-user-secret和fa-archive)无法正确显示。它们显示为其他一些角色(可能是亚洲人,不知道哪种语言)。大多数其他图标,如fa-user工作没有问题。

我的理论是,FA与其他库中的某些CSS和/或Web字体之间存在冲突。也许带有受影响图标的旧FA会加载而不是新的FA版本。我是使用dbootstrap(Dojo的Bootstrap主题),它带有自己的FA - 前缀为“icon-”而不是“fa-”。停用dbootstrap并不能解决问题。

不起作用的示例代码段:

    <i class="fa fa-archive"></i>

一个有效的例子:

    <i class="fa fa-user"></i>

问题实际上只出现在Firefox上。

我试图取消其他一些lib和CSS,但却陷入了困境。

调试此类问题的推荐方法是什么?

5 个答案:

答案 0 :(得分:1)

检查about:config页面上的gfx.downloadable_fonts.enabled pref设置为true(如果需要,双击该行以切换其值)。

确保您允许网页选择自己的字体。

工具&gt;选项&gt;内容:字体&amp;颜色&gt;高级:[X]“允许页面选择自己的字体,而不是上面的选择”

答案 1 :(得分:0)

尝试在有故障的Web浏览器上安装firebug扩展或使用内置的应用程序控制台,并检查文件的Web浏览器状态是否为200 OK,同时检查您的应用程序字符是否为UTF-8,如果没有&# 39; t work然后你的html标记代码是我的下一个赌注,浏览字体真棒docs文件并检查你是否正确实现了它。

答案 2 :(得分:0)

如果只显示某些图标,则很可能是因为您使用的是不包含这些图标的fontawesome版本。

您是否检查过Firefox中加载的fontawesome css是否包含丢失的图标?

我知道您可以在IE和Chrome中看到它们,但这可能是由于缓存......

答案 3 :(得分:0)

我发现了问题,毕竟是dbootstrap(Dojo的Bootstrap主题)。它附带了自己的(较旧的)Font Awesome副本,并在其自己的CSS中重新定义了font-face FontAwesome。

出于某种原因,此问题仅出现在Firefox上,可能CSS和Web字体的加载顺序略有不同。我从dbootstrap中删除了FA,现在FA在FA中按预期工作。

答案 4 :(得分:0)

在我的情况下,只有一些图标被uBlock Origin屏蔽了,这对我来说仍然有点令人惊讶 - 所以值得尝试查看是否停用相关的附加组件可以解决问题问题。