试图找出为什么图标显示白色图标。我已经尝试将"fab"更改为"fa"，但没有运气。 有没有其他人在使用字体真棒时遇到过这个问题？
* {
font-family: 'Open Sans', sans-serif !important;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul>
<li><a><i class="fas fa-facebook"></i></a></li>
<li><a><i class="fas fa-twitter"></i></a></li>
<li><a><i class="fab fa-youtube"></i></a></li>
<li><a><i class="fab fa-instagram"></i></a></li>
</ul>检查工作代码片段。
在您的代码中，您有 2 个问题：
1(fas和fab需要更改为fa
2(所有<i>项都需要是字体家族fontawesome，并且您的代码：
* {
font-family: 'Open Sans', sans-serif !important;
}
只需重写其默认样式，图标无法呈现。最好不要使用带有字体系列等样式规则*选择器来避免此类问题。因此，您可以删除这些行，也可以明确告诉<i>标签具有正确的字体系列，就像在我的代码片段中一样。
为什么我的图标在字体上显示正方形很棒？
很多原因：
-
首先，你重置字体家族，所以没有办法让 icone 显示。 ，然后：
- 您使用了错误的库(或错误的类命名(
- 某些类名错误
您可以过滤从fa开始的所有类，以避免覆盖显示图标的字体系列。
下面的示例，通过:not()选择器过滤图标容器，添加良好的库并修复Facebook和Twitter的类名。
*:not([class^="fa"]) {
font-family: 'Open Sans', sans-serif !important;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<ul>
<li><a><i class="fab fa-facebook-f"></i></a></li>
<li><a><i class="fab fa-twitter"></i></a></li>
<li><a><i class="fab fa-youtube"></i></a></li>
<li><a><i class="fab fa-instagram"></i></a></li>
</ul>您的样式标签将覆盖 fontawesome 提供的用于显示图标的字体。
* {
font-family: 'Open Sans', sans-serif !important;
}
删除!important就足够了。
此外，应用于<i>标签的类是fa(不是fab或fas(
你的代码应该看起来像下面 只是错误的字体 图标的真棒类
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
*{
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a><i class="fa fa-facebook"></i></a></li>
<li><a><i class="fa fa-twitter"></i></a></li>
<li><a><i class="fa fa-youtube"></i></a></li>
<li><a><i class="fa fa-instagram"></i></a></li>
</ul>
</body>
</html>-
字体真棒4.x版本CDN -
<i class="fa fa-facebook"></i>实时链接 - Jsfiddle 4.x 版本
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a><i class="fa fa-facebook"></i></a></li>
<li><a><i class="fa fa-twitter"></i></a></li>
<li><a><i class="fa fa-youtube"></i></a></li>
<li><a><i class="fa fa-instagram"></i></a></li>
</ul>
</body>
</html>-
字体真棒 5.x 版本 CDN -
<i class="fas fa-facebook"></i>实时链接 - Jsfiddle for 5.x 版本
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
</head>
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a><i class="fab fa-facebook-f"></i></a></li>
<li><a><i class="fab fa-twitter"></i></a></li>
<li><a><i class="fab fa-youtube"></i></a></li>
<li><a><i class="fab fa-instagram"></i></a></li>
</ul>
</body>
</html>错误的版本
您所要做的就是将它们全部转换为fa-fa，然后删除字体。您应该为此使用Font Awesome版本4.70.0(显示旧的youtube徽标(。
https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css.
如果你不想这样做，你必须去 Font Awesome的 5.12.0 版本，我不想这样做 - 只需键入上面的链接而不是代码中的链接。 完整代码：
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul>
<li><a><i class="fa fa-facebook"></i></a></li>
<li><a><i class="fa fa-twitter"></i></a></li>
<li><a><i class="fa fa-youtube"></i></a></li>
<li><a><i class="fa fa-instagram"></i></a></li>
</ul>