Question

我正在尝试将font-awesome集成到一个Web项目中，但是我的css中识别出的一小段代码使得字体很棒的图标显示为白色方块。当我删除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;
}

这是问题，因为font-awesome图标使用:before，这是代码

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

Answer 2

您正在覆盖:before和:after伪选择器中的所有（*）字体;由font-awesome和许多其他lib使用。您应尝试使用.class或#id的代码段来定位需要更改的内容。

Answer 3

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

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

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

由于CSS代码片段而未加载Font-Awesome图标

3 个答案: