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>

原文由 Mahyar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

然后右键单击保存网络字体 - 打开新选项卡：

并将这些文件移动到您的网络字体文件夹中。 （在我的例子中，我不得不覆盖现有的网络字体——这就是它首先显示方框的原因）。

问题解决了！

原文由 Eitanmg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

阅读此页面上的答案后，我根据其他建议通过链接到 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 文件的链接之上的困难方法。

原文由 jenstreetman 发布，翻译遵循 CC BY-SA 4.0 许可协议