Question

由于某种原因，“字体真棒”图标未在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

确保您使用的是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的问题。实际显示图标完全无效。我已经阅读了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;

带有Chrome的Bootstrap中不显示Font Awesome Icons

3 个答案: