编辑:已解决,请参阅下面的答案。
我使用了几个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,但却陷入了困境。
调试此类问题的推荐方法是什么?
答案 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
屏蔽了,这对我来说仍然有点令人惊讶 - 所以值得尝试查看是否停用相关的附加组件可以解决问题问题。