Chrome-真棒字体5一些图标不起作用

Question

我正在使用Font Awesome5。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

将此代码添加到您的 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 2

导入此css，它将对所有字体真棒图标以及所有版本的图标都适用。

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

Answer 3

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

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

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