fa-user-circle-o 不工作答案

【问题标题】：fa-user-circle-o not workingfa-user-circle-o 不工作
【发布时间】：2017-12-13 16:47:29
【问题描述】：

我想显示用户圆圈图标，我已经下载了一个字体很棒的 css 文件，版本为 4.7.0。但这对我不起作用。如果我使用 cdn 那么它的工作。我没有得到下载文件中的问题。这是我的代码：

<html>
    <head>
        <link href="font-awesome.min.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <i class="fa fa-user-circle-o"></i>
    </body>
</html>

有人知道是什么问题吗？

【问题讨论】：

可能与“相对路径”有关。你能分享你的css文件吗？

标签： html font-awesome

【解决方案1】：

body 部分 HTML 没有问题。当然，它必须是 font-awesome.min.css 或其路径。

有两种方法可以解决这个问题：

font-awesome.min.css 可能不会与您的 HTML 一起加载。签入 chrome DevTools 的 network 选项卡。您提供的路径指示 chrome 在与 HTML 文件相同的目录中查找 CSS 文件。
或者，如果您不想自己维护 CSS，您可以提供 cdn 链接到 font-awesome.min.css。为此，将head 中的link 选项卡更改为以下：

【讨论】：

【解决方案2】：

您还必须托管字体文件。访问 fontawesome 网站并阅读相关文档。 Font awesome get started

【讨论】：

【解决方案3】：

从它的名字就可以理解，Font-Awesome 有很酷的基于字体的方法来使用图标。所以，包括 CSS 文件是不够的。如果你想在本地存储你的 CSS 文件，你也应该存储字体文件。

作为documented，您的服务器上应该有整个文件夹（包括字体文件夹，其中包括 woff、tff 等）。

将整个 font-awesome 目录复制到您的项目中。

在您的 html 中，将位置引用到您的 font-awesome.min.css。

【讨论】：