为什么在使用 font awesome 时某些图标有空白方块？ [复制]答案

【问题标题】：Why do I have blank squares for some icons when using font awesome? [duplicate]为什么在使用 font awesome 时某些图标有空白方块？ [复制]
【发布时间】：2018-07-10 20:57:48
【问题描述】：

正如你在我的小提琴中看到的，一些来自 font awesome 的图标不起作用。为什么？

https://jsfiddle.net/aq9Laaew/80841/

<div class="col-md-1 d-flex flex-column justify-content-center align-items-center">
  <i class="fa fa-searchengin"></i>
  <span>SEO</span>
</div>
<div class="col-md-1 d-flex flex-column justify-content-center align-items-center">
  <i class="fa fa-facebook-square"></i>
  <span>Social</span>
</div>

【问题讨论】：

因为你的类名没有与字体类链接
因为你有错别字。没有像fa-searchengin 这样的图标。您必须从该列表中指定现有图标：fontawesome.com/v4.7.0/icons（来自我假设您使用的是 v4 的类名）。并确保包含最新的 CSS。
我使用的是 5.1，因为我需要更多图标。 fontawesome.com/icons?d=gallery&q=searchengin
哦，我明白了，但是您在元素上使用 v4 类。
别人做的，请看下面的答案。

标签： css fonts font-awesome

【解决方案1】：

您正在使用旧课程。最新的 Font Awesome 使用“fab fa-icon-name”类，因此将 b 添加到您的类中。

 <div class="col-md-1 d-flex flex-column justify-content-center align-items-center">
  <i class="fab fa-searchengin"></i>
  <span>SEO</span>
</div>
<div class="col-md-1 d-flex flex-column justify-content-center align-items-center">
  <i class="fab fa-facebook-square"></i>
  <span>Social</span>
</div>

JS 小提琴：https://jsfiddle.net/1n74q20u/

【讨论】：

【解决方案2】：

<div class="col-md-1 d-flex flex-column justify-content-center align-items-center">
  <i class="fab fa-searchengin"></i>
<span>SEO</span>
</div>
<div class="col-md-1 d-flex flex-column justify-content-center align-items-center">
  <i class="fab fa-facebook-square"></i>
 <span>Social</span>
</div>

检查字体真棒页面并确保第一类与您使用的相匹配。在那个 jsfiddle 上，我已将 fa 更改为 fab，它们都可以工作。

【讨论】：