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

不确定你的意思是“图标没有显示”，但我的猜测是你没有包含Font Awesome的CSS文件。您可以将其添加到HTML的<head>中：

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

使用您提供的代码，它可以正常运行。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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 3

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

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

Answer 4

如果您打算在项目文件中使用超赞的本地副本字体（无需访问Web链接），而不是仅处理超赞的字体文件，请复制下载的超赞zip上的所有内容。

例如，font-awesome v4.7带有4个文件夹（css，fonts，less，scss），并且存在该文件夹是有原因的。

如果您查看css文件（font-awesome.css），您会看到它在其他文件中的用法。

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

Answer 5

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

只有在本地引用的字体对我的Web应用程序很棒时才发生。

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

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

，然后将这些文件移动到您的网络字体文件夹中。（就我而言，我必须覆盖现有的Web字体-这就是为什么它首先显示方形框的原因。）

问题解决了！

显示作为方形框的字体令人敬畏的图标

5 个答案: