html - 为什么我的图标在 Font Awesome 上显示方 block ？

Question

试图找出为什么图标显示为白色图标。我已经尝试将“fab”更改为“fa”，但没有成功。有没有其他人在使用 Font Awesome 时遇到过这个问题？

* {
  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>

Answer 1

检查 working code snippet .

在你的代码中你有 2 个问题:

1) fas和 fab需要改为fa

2) 所有 <i>元素需要是 font-family fontawesome，你的代码:

* {
    font-family: 'Open Sans', sans-serif !important;
}

只是重写了它们的默认样式，图标无法渲染。最好不要使用 *具有字体系列等样式规则的选择器可以避免此类问题。所以你可以删除这些行，或者明确告诉 <i>标签是正确的字体系列，就像在我的代码片段中一样。