Font Awesome 图标未显示在 Chrome 和 Bootstrap 中

Question

出于某种原因，Font Awesome 图标未在 Chrome 中显示，但它们在 Firefox 中有效。

我试过更改 CDN，但也没有用。当我将 nav-link class 添加到带有图标的 link 时，问题就出现了。当 link 没有 class 时，它们没有问题。

  <nav class="menu">
    <ul class="menu-nav">
      <li class="nav-item">
        <a href="" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="about.html" class="nav-link">About me</a>
      </li>
      <li class="nav-item">
        <a href="work.html" class="nav-link">My Work</a>
      </li>
      <li class="nav-item">
        <a href="contact.html" class="nav-link">Contact</a>
      </li>
      <li class="nav-item social-links">
        <a
          href="#"
          target="_blank"
          class="nav-link social-link"
          ><i class="fab fa-linkedin fa-3x"></i
        ></a>
        <a
          href="#"
          class="nav-link social-link"
          target="_blank"
          ><i class="fab fa-github fa-3x"></i
        ></a>
        <a
          href="#"
          class="nav-link social-link"
          ><i class="far fa-envelope fa-3x"></i
        ></a>
      </li>
    </ul>
  </nav>

Answer 1

确保您使用的是 Font_Awesome 和 Bootstrap 的正确版本。我用你的例子创建了一个 fiddle 并在 Chrome:

上工作

<nav class="menu">
<ul class="menu-nav">
  <li class="nav-item">
    <a href="" class="nav-link">Home</a>
  </li>
  <li class="nav-item">
    <a href="about.html" class="nav-link">About me</a>
  </li>
  <li class="nav-item">
    <a href="work.html" class="nav-link">My Work</a>
  </li>
  <li class="nav-item">
    <a href="contact.html" class="nav-link">Contact</a>
  </li>
  <li class="nav-item social-links">
    <a
      href="#"
      target="_blank"
      class="nav-link social-link"
      ><i class="fab fa-linkedin fa-3x"></i
    ></a>
    <a
      href="#"
      class="nav-link social-link"
      target="_blank"
      ><i class="fab fa-github fa-3x"></i
    ></a>
    <a
      href="#"
      class="nav-link social-link"
      ><i class="far fa-envelope fa-3x"></i
    ></a>
  </li>
</ul>

Answer 2

不要使用 CDN 文件。从 fontawosome 站点“https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself”下载文件。并在您的 html 文件中导入以下链接。

<link rel="stylesheet" href="css/fontawesome.min.css"> <link rel="stylesheet" href="css/all.css">

并且不要忘记在您的模板文件夹中添加 "webfonts" 文件夹。

Answer 3

我在使用 Font Awesome 5 和 bootstrap 4.3 时遇到了问题。实际显示图标并没有完全起作用。我已经阅读了 Whosebug 和其他地方提供的许多主题和解决方案，但对我没有任何帮助。

我的解决方法：使用 4.7 版（图标名称没有 "alt" 部分，但图标或多或少有 none 更少） - 因此类别也是 fa 而不是 fas.

这是我在页面顶部使用的 CSS 链接

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

和 CSS 代码：（不要问我那里的版本，无论如何它都可以工作，并且是我能找到的所有解决方案 - 我很难返回良好的搜索结果深入探讨了该主题，还查阅了 Font Awesome 上的一些文档。）

.fa {
display: inline-block;
font-family: Font Awesome\ 5 Free;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-weight: 900; 
color:lightpink;

Font Awesome 图标未显示在 Chrome 和 Bootstrap 中

Font Awesome Icons not showing in Chrome with Bootstrap

google-chrome

font-awesome

bootstrap-4