css - Firefox 不呈现 FontAwesome

标签 css twitter-bootstrap firefox font-awesome

出于某些奇怪的原因,Firefox 无法正确呈现 FontAwesome。它适用于 Chrome 和 Safari,但不适用于 Firefox。

Font Awesome 是通过 Bower 添加的,因此在本地加载。没有通过 CDN。

<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css" type="text/css">

这是它在 Firefox 中的样子(错误):

Firefox

这是它在 Chrome 和 Safari 中的样子(正确):

enter image description here

我尝试过的事情:

  • 尝试通过 CDN 加载它并添加“Access-Control-Allow-Origin”到 .htaccess
  • 将字体移动到同一目录(检查它是否是相对路径 问题)

到现在为止什么都没做。

///编辑

这是它在检查器中的显示方式 enter image description here

最佳答案

我已经解决了这个问题。我的印象是,在哪个位置加载 Font Awesome CSS 文件并不重要。它是头文件中加载的第一个 css 文件。我把它移到最后一个位置,现在它工作得很好。

我无法找出为什么这可以解决 firefox 中的问题,但它确实起到了作用。我仍然觉得非常奇怪的是,CSS 在 Firefox 中的加载顺序很重要,但在 Chrome 和 Safari 中却没有。

也许其他人对此了解更多。

关于css - Firefox 不呈现 FontAwesome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25893772/

相关文章:

firefox - 如何防止 NVDA 自动将焦点设置在最后使用的 HTML 元素上?

jquery - 改变所有其他元素的背景颜色

css - 为什么这个标志在 Firefox 中不显示?

jquery - 单击模式中的按钮时,尝试更改启动模式的按钮的属性

html - 在 Bootstrap 中修改元素

javascript - 将 Firefox 附加组件转换为便签本格式

firefox - 将火狐降级到8

javascript - jQuery Rain "Animated Menu Icon"onclick 不工作

html - 无序列表分崩离析 html

css - Bootstrap 3 在列中有水平填充而不是垂直填充是有原因的吗?