字体真棒 5 不起作用

Question

当我遇到问题时，我决定是时候切换到 Font-awesome 5 了。 我的图标没有显示。 它向我展示了这一点。

我不明白问题出在哪里。 我遵循了他们网站上的每一步并正确链接了文件，但它们仍然没有显示。 这是文件的屏幕截图。

这是什么原因造成的？ 为什么不起作用？

Answer 1

让我们将 all.min.css 添加到 css 目录然后链接它

<link rel="stylesheet" href="/css/all.min.css">

并在所有主文件夹旁边创建 webfonts 目录

Answer 2

您可以将 cdn 链接用于 fontawsome，这是一种更好的方法。 请看下面的代码，它可能对你有帮助

 <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet"> <i class="fa fa-camera-retro fa-10x" ></i>

Answer 3

尝试通过在导入方法的开头添加另一个 / 来使用绝对路径。

您确定只需要导入缩小后的 css 吗？ 您可能还需要导入字体。

控制台上的错误表明您面临的问题与导入有关。

Answer 4

我看到您正在从/fontawesome获取 .CSS。 然后 FA 将尝试从/webfonts加载其字体 - 我认为这不存在。

我建议坚持使用 FA 的文件夹结构。 将 .CSS 移动到/fontawesome/css并确保将webfonts-with-css/webfonts夹复制到/fontawesome/webfonts 。

Answer 5

我有同样的问题。 我有一个名为 fontawesome 的目录，我将 fontawesome-all.css 和 webfonts 目录放入其中。

我只是通过添加子目录 css，将 .css 文件移动到它并更改链接以包含子目录，将其更改为放置目录结构。

现在完美运行。

Answer 6

一个简单的解决方案。

1. 从#fontawesome for #web 下载文件

2. 你的html

3. 您的浏览器屏幕

Answer 7

它是<i class="fa fa-camera-retro fa-10x" ></i>不是<i class="fas fa-camera-retro fa-10x" ></i> </pre>

Answer 8

你的问题是“fa”而不是“fas”

<i class="fa fa-camera-retro fa-10x" ></i>