Question

我正在使用Font Awesome 5. Chrome中没有显示某些图标。例如＆＃34; fa-facebook-f＆＃34;。当我将图标类更改为fa-facebook时，它可以正常工作。有办法解决吗？这是我在chrome中看到的。

<a href="#" target="_blank" class="icon-facebook">
    <i class="fab fa-facebook-f">
    </i>
  </a>
  <a href="#" target="_blank" class="icon-twitter">
    <i class="fab fa-twitter">
    </i>
  </a>
  <a href="#" target="_blank" class="icon-google_plus">
    <i class="fab fa-google-plus-g">
    </i>
  </a>
  <a href="#" target="_blank" class="icon-pinterest">
    <i class="fab fa-pinterest">
    </i>
  </a>
  <a href="#" target="_blank" class="icon-linkedin">
    <i class="fab fa-linkedin-in">
    </i>
  </a>
  <a href="#" target="_blank" class="icon-instagram">
    <i class="fab fa-instagram">
    </i>
  </a>
  <a href="#" target="_blank" class="icon-tumblr">
    <i class="fab fa-tumblr">
    </i>
  </a>

Answer 1

导入此css它将适用于所有字体真棒图标以及它将起作用的所有图标版本。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">

Answer 2

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

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

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

Answer 3

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

如果是，那么尝试这个类名而不是＆＃34; fab＆＃34;文档中未引用的内容

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

Answer 4

它的工作正常...它可能你没有链接正确的字体 - 真棒文件

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<a href="#" target="_blank" class="icon-facebook">
  <i class="fab fa-facebook-f">
    </i>
</a>
<a href="#" target="_blank" class="icon-twitter">
  <i class="fab fa-twitter">
    </i>
</a>
<a href="#" target="_blank" class="icon-google_plus">
  <i class="fab fa-google-plus-g">
    </i>
</a>
<a href="#" target="_blank" class="icon-pinterest">
  <i class="fab fa-pinterest">
    </i>
</a>
<a href="#" target="_blank" class="icon-linkedin">
  <i class="fab fa-linkedin-in">
    </i>
</a>
<a href="#" target="_blank" class="icon-instagram">
  <i class="fab fa-instagram">
    </i>
</a>
<a href="#" target="_blank" class="icon-tumblr">
  <i class="fab fa-tumblr">
    </i>
</a>

Answer 5

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

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

请记住使用该类型的类的一件事

fab fa-linkedin

在某些网站上，其表示为

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>

Answer 6

这个类名适用于linkedin：

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

在 index.html 中的 head 标签下使用以下链接：

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

Chrome - Font Awesome 5一些图标不起作用

6 个答案: