Css Chrome-Font Asome5有些图标不工作

我用的是字体真棒5。有些图标没有在Chrome中显示。例如“fa-facebook-f”。当我将icon类更改为fa facebook时，它可以工作。有办法解决吗？ 以下是我在chrome中看到的内容

---

您是否导入了css、js以及描述字体的etf文件

如果是，则尝试使用此类名，而不是文档中未引用的“fab”

<i class="fas fa-camera-retro"></i>

---

工作正常……可能您没有链接正确的字体文件

---

导入此css，它将适用于所有字体超棒图标，也适用于所有版本的图标

---

将此代码添加到HTML文件的body和style标记之前

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">

在某些站点中，它被指定为

fa fa-linkedin

这不起作用，所以用“fab”代替“fa”

你可以在你的网站上使用这个图标 出于测试目的，您可以使用此代码

<div class="row text-center">
      <!-- Team item-->
      <div class="col-xl-3 col-sm-6 mb-5">
        <div class="bg-white rounded shadow-sm py-5 px-4"><img src="https://res.cloudinary.com/mhmd/image/upload/v1556834132/avatar-4_ozhrib.png" alt="" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm">
          <h5 class="mb-0">Vishal Jat</h5><span class="small text-uppercase text-muted">CEO - Founder</span>
          <ul class="social mb-0 list-inline mt-3">
            <li class="list-inline-item"><a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a></li>
            <li class="list-inline-item"><a href="#" class="social-link"><i class="fab fa-twitter"></i></a></li>
            <li class="list-inline-item"><a href="#" class="social-link"><i class="fab fa-instagram"></i></a></li>
            <li class="list-inline-item"><a href="#" class="social-link"><i class="fab fa-linkedin"></i></a></li>
          </ul>
        </div>
      </div>

Vishal JatCEO-创始人

你可以在课堂上用“fab”代替“fa”

---

这肯定会奏效。将“fa”替换为“fab”或“fas”。

此类名适用于linkedin：

<i class="fab fa-linkedin-in" aria-hidden="true"></i>

使用了head标记下index.html中的以下链接：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css">

等等，你为什么那样使用它呢

fa-fa-facebook-f

？你用哪个url/cdn来拉图标？问题出在chrome上吗？确保你的网站没有加载多个版本的FontAwesome。我也有同样的问题，通过确保至少所有包含都在同一个版本中，直到它被清理后才被包含一次来解决。那么为什么它在Firefox中工作，而不是chrome，为什么它们中的一些出现了？@user3351236上面的代码片段对你有用吗。。。？

<i class="fab fa-linkedin"></i>

<i class="fab fa-linkedin-in" aria-hidden="true"></i>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css">