某些 Font Awesome 图标在 Firefox 中不显示，如何调试？答案

【问题标题】：Some Font Awesome icons are not shown in Firefox, how to debug?某些 Font Awesome 图标在 Firefox 中不显示，如何调试？
【发布时间】：2015-03-19 09:25:34
【问题描述】：

编辑：已解决，请参阅下面的答案。

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

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

我的理论是 FA 与来自其他库之一的一些 CSS 和/或网络字体之间存在冲突。可能会加载带有受影响图标的旧 FA 而不是新的 FA 版本。我是例如使用带有自己的 FA 的 dbootstrap（Dojo 的 Bootstrap 主题） - 前缀为“icon-”而不是“fa-”。停用 dbootstrap 并不能解决问题。

一个不起作用的示例 sn-p：

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

一个有效的例子：

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

这个问题真的只出现在 Firefox 上。

我尝试停用其他一些库和 CSS，但在此过程中卡住了。

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

【问题讨论】：

"dboostrap"？那是什么？搜索只是向我展示了有关创建启动软盘的信息。
发布一个您正在使用但不起作用的标记的示例。
FontAwesome 图标在标记中时不显示与 JavaScript 无关，我已经删除了不相关的标签。
检查这个stackoverflow.com/q/18376875/20126可能的重复。
还有这个stackoverflow.com/questions/16866872/…

标签： css firefox fonts font-awesome

【解决方案1】：

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

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

工具>选项>内容：字体和颜色>高级：[X]“允许页面选择自己的字体，而不是我上面的选择”

【讨论】：

【解决方案2】：

尝试在有故障的 Web 浏览器上安装 firebug 扩展程序或使用内置的应用程序控制台并检查文件的 Web 浏览器状态是否为 200 OK ，并检查您的应用程序字符编码是否应为 UTF-8，如果不是t 工作然后你的 html 标记代码是我的下一个赌注，通过字体真棒文档文件并检查你是否正确实现它。

【讨论】：

我在 Firebug 中看不到任何错误，编码似乎也是正确的。请注意 fa-user 工作，而 fa-user-secret 不工作。

【解决方案3】：

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

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

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

【讨论】：

是的，检查过。我正在通过 Bower 安装 FA 4.3.0，并且总是在清空浏览器缓存后进行测试。
你能发布最简单的失败的 HTML 以便我们看看吗？我猜你已经尝试了一个只有这两个元素的纯 HTML 文件，看看它是否不是你的 Firefox 版本/安装的问题......

【解决方案4】：

我发现了问题，毕竟是 dbootstrap（Dojo 的 Bootstrap 主题）。它带有自己的（旧版）Font Awesome 副本，并在自己的 CSS 中重新定义了 font-face FontAwesome。

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

【讨论】：

【解决方案5】：

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

【讨论】：