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

Question

我试图将font-awesome集成到一个Web项目中，但是在我的CSS中识别出的一小段代码会使字体-awesome图标显示为白色正方形。 当我删除一些CSS代码时，它可以工作，但是由于当前的网站布局，我无法删除它。 是否有办法使图标正确显示？

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

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

无论是在我的自定义CSS代码之前还是之后，都添加了font-awesome 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伪选择器中的所有（*） 字体 ； 真棒字体和许多其他lib都使用了它们。 您应该尝试仅定位需要使用.class或#id代码段进行的#id 。

Answer 3

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

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

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