html - 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 文件的链接上方的困难方法。