Html 字体图标显示为方形框

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

<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>

我不确定你所说的“图标没有显示”是什么意思，但我猜你还没有包括字体的CSS文件。您可以通过将其包含在HTML的

中来实现：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

使用您提供的代码，它可以正常工作

如果您打算在项目文件中使用本地复制字体awesome（无需访问web链接），而不是只复制字体awesome文件，请将所有内容复制到下载的字体awesome zip上

例如，font awesome v4.7附带了4个文件夹（css、fonts、less、SCS），这是有原因的

如果您查看css文件（font awesome.css）的内部，您可以看到其他类似文件的用法

src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');

---

在阅读了本页上的答案后，我根据其他建议链接到CDN，从而获得了自己的代码。不过，我真正想要的是将Font Awesome文件夹添加到我的项目中，并链接到项目文件。当我研究CDN的链接时，我注意到它使用了以css/all.css结尾的路径。我注意到我下载并解压缩的文件夹中包含了一个all.css文件和fontawesome.css文件，这似乎是-v5.0版本的一个变化。我将链接从以下位置更改为：

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

致：

它成功了

---

我还学到了一个艰难的方法，即字体Awesome链接必须放在指向项目main.css文件的链接之上

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

这只发生在我的web应用程序的本地引用font awesome时

当我调查URL时，我发现还需要加载web字体（不仅仅是css文件本身）：

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

并将这些文件移动到您的web字体文件夹中。（在我的例子中，我必须覆盖现有的webfonts——这就是为什么它首先显示方形框的原因）

---

问题解决了

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

您是否使用CSS加载FontAwesome图标？是的，我已经包含了FontAwesome CSS文件，可能您的问题与CSS有关。为了验证您是否可以将其添加到您的头部-

i allready包含了css。问题是，如果我在任何浏览器中看到load，它只会显示方形框，而不是Facebook图标，帮助我将链接粘贴到我的html文件中，它就工作了。因此，我认为问题出在我的font-awome.min.css文件中不清楚OP是如何加载FA css文件的，因此这样的答案应该从“检查FA css文件是否成功加载；使用浏览器检查器”开始。之后，您可以提及您正在接触的本地加载详细信息。

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

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