由于一段 CSS 代码，Font-Awesome 图标未加载

Question

我正在尝试将超棒字体集成到 Web 项目中，但在我的 css 中识别出的一小段代码使超棒字体图标显示为白色方块。当我删除 CSS 代码的小和平时，它可以工作，但由于当前网站布局，我无法删除它。有没有办法让图标显示正确？

这是阻止布局所需图标的代码：

*,*:before,*:after{
    box-sizing: border-box;
    position: relative;
    font-family : Arial;
    font-size   : 12px;
    font-weight : normal;
}

font-awesome css 是否包含在我的自定义 css 代码之前或之后并不重要。问题仍然存在...

Answer 1

问题出在 *:before，因此您必须更改 css。看看这个https://jsfiddle.net/ss95sfLz/

CSS

*,*:after{
  box-sizing: border-box;
  position: relative;
  font-family : Arial;
  font-size   : 12px;
  font-weight : normal;
}

这是个问题，因为超棒的字体图标使用 :before，这是代码

.fa-balance-scale::before {
   content: "";
}

Answer 2

您正在覆盖 :before 和 :after 伪选择器中的所有字体；由 font-awesome 和许多其他库使用。您应该尝试将目标仅需要通过 .class 或 #id.

更改的代码片段

Answer 3

您的字体系列正在被覆盖为 Arial。从此选择器中删除与字体相关的部分并将其添加到 body 选择器。

*,*:before,*:after{
    box-sizing: border-box;
    position: relative;
}

body {
    font-family : Arial;
    font-size   : 12px;
    font-weight : normal;
}

由于一段 CSS 代码，Font-Awesome 图标未加载

Font-Awesome icons not loaded due to piece of CSS code

html

css

fonts

fontawesome-4.4.0