某些 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
屏蔽了,这对我来说仍然有点令人惊讶——因此值得尝试看看停用相关加载项是否可以解决问题。
编辑:已解决,请参阅下面的答案。
我正在使用几个 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
屏蔽了,这对我来说仍然有点令人惊讶——因此值得尝试看看停用相关加载项是否可以解决问题。