Font-Awesome 图标显示为方框

Question

为什么我的代码没有显示图标？

<ul>
    <li><a href="#" class="facebook" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#" class="twitter" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a></li>
</ul>

Answer 1

阅读此页面上的答案后，我根据其他建议链接到 CDN，从而使自己的代码正常工作。不过，我真正想要的是将 Font Awesome 文件夹添加到我的项目并链接到项目文件。当我研究 CDN 的链接时，我注意到它使用了一个以 css/all.css 结尾的路径。我注意到我下载并解压缩的文件夹包含一个 all.css 文件以及 fontawesome.css 文件，这似乎是 -v 5.0 的更改。我改变了我的链接：

<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/fontawesome.css"> 

到：

<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css">

它奏效了。

我还了解到必须将 Font Awesome 链接放在指向项目 main.css 文件的链接上方的艰难方法。

Answer 2

有同样的问题，其中一些图标显示为方框。

它只发生在我的网络应用程序的本地字体很棒的参考中。

当我调查 URL 时，我看到还有需要加载的网络字体（不仅仅是 css 文件本身）：

然后右键单击保存网络字体 - 打开新标签：

并将这些文件移动到您的 web-fonts 文件夹中。（在我的情况下，我不得不覆盖现有的 webfonts - 这就是它首先显示方框的原因）。

问题解决了！

Answer 3

对于 Pro 用户，请检查您是否有 fontawesome 的更新 CDN 链接，在撰写本文时，最新版本是 5.11.2。从https://fontawesome.com/account/cdn更新 cdn 链接解决了我的问题。在这里发布一个带有虚拟完整性属性的示例，不要使用此链接，您应该拥有自己的带有唯一 ?? 子资源完整性。

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-zrnmn8R8KkWl12rAZFt4yKjxplaDaT7/EUkKm7AovijfrQItFWR7O/JJn4DAa/gx" crossorigin="anonymous">