某些 Font Awesome 图标在 Firefox 中不显示,如何调试?

Some Font Awesome icons are not shown in Firefox, how to debug?

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

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

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

我的理论是 FA 与来自其他库之一的某些 CSS and/or 网络字体之间存在冲突。可能会加载具有受影响图标的旧 FA,而不是新 FA 版本。我是使用带有自己的 FA 的 dbootstrap(Dojo 的 Bootstrap 主题)——前缀为 "icon-" 而不是 "fa-"。停用 dbootstrap 并不能解决问题。

无效的示例代码段:

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

一个有效的例子:

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

问题确实只出现在 Firefox 上。

我试图停用其他一些库和 CSS 但在这个过程中卡住了。

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

尝试在有问题的 Web 浏览器上安装 firebug 扩展程序或使用内置的应用程序控制台并检查文件的 Web 浏览器状态是否为 200 OK,同时检查您的应用程序字符是否应该是 UTF- 8,如果这不起作用那么你的 html 标记代码是我的下一个赌注,通过 font awesome docs 文件并检查你是否正确实现它。

如果只有一些图标没有显示,很可能是您使用的 fontawesome 版本不包含这些图标。

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

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

我发现了问题,毕竟是 dbootstrap(Bootstrap Dojo 的主题)。它带有自己的(较旧的)Font Awesome 副本,并在其自己的 CSS.

中重新定义了字体 FontAwesome

由于某些原因,这个问题只出现在 Firefox 上,可能 CSS 和网络字体的加载顺序略有不同。我从 dbootstrap 中删除了 FA,现在 FA 在 FA 中按预期工作。

检查 about:config 页面上的 gfx.downloadable_fonts.enabled 首选项是否设置为真(如有必要,双击该行以切换其值)。

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

工具 > 选项 > 内容:字体和颜色 > 高级:[X] "Allow pages to choose their own fonts, instead of my selections above"

在我的例子中,只有一些图标被 uBlock Origin 屏蔽了,这对我来说仍然有点令人惊讶——因此值得尝试看看停用相关加载项是否可以解决问题。