[英]Font-Awesome icons not loaded due to piece of CSS code
I am trying to integrate font-awesome into a web project but an identified little piece of code in my css makes the font-awesome icons appear as white squares. 我试图将font-awesome集成到一个Web项目中,但是在我的CSS中识别出的一小段代码会使字体-awesome图标显示为白色正方形。 When I remove the little peace of CSS code it works but I cannot remove it due to the current web site layout.
当我删除一些CSS代码时,它可以工作,但是由于当前的网站布局,我无法删除它。 Is there a way to make the icons appear right anyway?
是否有办法使图标正确显示?
This is the code that blocks the icons that is needed for the layout: 这是阻止布局所需的图标的代码:
*,*:before,*:after{
box-sizing: border-box;
position: relative;
font-family : Arial;
font-size : 12px;
font-weight : normal;
}
It doesn't matter if font-awesome css is included before or after my custom css code. 无论是在我的自定义CSS代码之前还是之后,都添加了font-awesome CSS。 The issue remains...
问题仍然存在...
The problem is in *:before
so you have to change that in you css. 问题出在
*:before
因此您必须在CSS中进行更改。 Take a look at this https://jsfiddle.net/ss95sfLz/ 看看这个https://jsfiddle.net/ss95sfLz/
CSS 的CSS
*,*:after{
box-sizing: border-box;
position: relative;
font-family : Arial;
font-size : 12px;
font-weight : normal;
}
This is problem because font-awesome icon use :before
and this is the code 这是有问题的,因为真棒字体图标使用
:before
,这是代码
.fa-balance-scale::before {
content: "";
}
You are overriding all (*) of the fonts in the :before
and :after
pseudo selectors; 您将覆盖
:before
和:after
伪选择器中的所有(*) 字体 ; which are used by font-awesome and many other libs. 真棒字体和许多其他lib都使用了它们。 You should try to target only what needs to be changed by that code-snippet with a
.class
or #id
. 您应该尝试仅定位需要使用
.class
或#id
代码段进行的#id
。
Your font-family is being overwritten to Arial. 您的字体系列已被覆盖为Arial。 Remove the font related parts from this selector and add it to a
body
selector. 从此选择器中删除与字体相关的部分,并将其添加到
body
选择器中。
*,*:before,*:after{
box-sizing: border-box;
position: relative;
}
body {
font-family : Arial;
font-size : 12px;
font-weight : normal;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.