带有 Bootstrap 的 Chrome 中未显示字体真棒图标

Question

由于某种原因，Font Awesome Icons 没有在 Chrome 中显示，但在 Firefox 中可以使用。

我已尝试更改 CDN，但也不起作用。当我将 nav-link 类添加到带有图标的链接时，问题就出现了。当链接没有类时，它们没有问题。

  <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

不要使用 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 2

确保您使用的是正确版本的 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 3

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

我的解决方法：使用 4.7 版（图标名称没有“alt”部分，但图标或多或少仍然存在） - 因此类别也是 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;