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

标签 css firefox fonts font-awesome

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

我正在使用几个 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 不能解决问题。

无效的示例代码段:

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

一个有效的例子:

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

问题确实只出现在 Firefox 上。

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

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

最佳答案

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

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

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

关于css - 某些 Font Awesome 图标在 Firefox 中不显示,如何调试?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29140878/

相关文章:

CSS:将 div 高度放入另一个包含的填充中

css - 我如何在我的用户样式表中选择跨域链接?

java - 使用 Java 字体时不显示字母

ios - NSAttributedString 报告 UITextView sizeThatFits 和 boundingRectWithSize 的大小不正确,并设置了正确的选项

jquery - 响应式侧边栏也是固定的

javascript - 为什么我的功能只能使用一个 ID?

javascript - 调试时如何使用firefox developer edition console?

html - Firefox 中的布局困惑 - 列?

FireFox 中的 Javascript 错误不在 IE 和 Chrome 中

html - Chrome/Opera CSS 在孟加拉语/印度语/泰米尔语/乌尔都语中显示错误(在 FireFox/IE 中不会发生)