Chrome - Font Awesome 5 某些图标无法正常工作

Question

我正在使用 Font Awesome 5。某些图标在 Chrome 中未显示。例如“fa-facebook-f”。当我将图标类更改为 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

将此代码添加到 HTML 文件中的正文和样式标记之前

<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 3

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

<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 4

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

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

这肯定会起作用。将“fa”替换为“fab”或“fas”。

Answer 5

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

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

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

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/[email protected]/css/fontawesome.min.css">

Answer 7

我注意到当我将这部分添加到代码中时，库无法加载。

integrity="sha512-Vw3RTv7vrqtzj7Umk17DszsotZa6PXj5dnTEszUbnvmVq7Jpj27GPvmXzQkMV6mPvhj1g+YY4fb7DrlLBwTVlw==" crossorigin="anonymous" referrerpolicy="no-referrer"

但是当我这样做时，所有图标似乎都从库中完美加载。

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" 
<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-facebook"></i> 
    </i>
</a>
<a href="#" target="_blank" class="icon-twitter">
     <i class="fab fa-twitter">
    </i>
</a>
<a href="#" target="_blank" class="icon-twitter">
     <i class="fab fa-google"></i> 
</a>