如何在不使用CDN的情况下包含字体awesome 4.1的本地文件？

Question

这是字体真棒的效果,我只能在使用字体真棒4.1 CDN时才能得到它

使用下载的文件,我包括fonts文件夹和font-awesome.css,但仍然没有显示图标.

我的链接是正确的.

font-awesome.css文件路径,我没有改变任何东西.

目录文件夹和文件.

在字体文件夹里面.

在css文件夹里面.

*********************************************************************************************************************************
我已经解决了问题.这是由于输入代码时出错.我输入了fontawesome v3.1风格

 <i class="icon-twitter-sign icon-x3"></i>

现在我正在使用v4.1,这就是为什么它不起作用.它应该是

 <i class="fa fa-twitter icon-x3"></i>

使它工作.

Answer 1

1. 从他们的网站下载fontawesome软件包.
2. 解压缩包,找到fontawesome.css文件.
3. 将此文件复制到您的css目录
4. 将提取的fontawesome软件包中的所有字体文件复制到fonts文件夹中.
5. 最后通过给出css文件的相应位置,将fontawesome.css添加到你的html页面.

和瞧!

Answer 2

只是下载Css并链接到该文件是没有意义的,你应该查看css文件....

你没有下载存储所有字体样式的字体文件夹...所以下载它并给出系统上的字体文件的路径,我已经在框中显示了你需要在font-awesome css文件中添加链接的链接..

从cdn链接下载字体并存储在fonts文件夹中.

希望这对你有用..

Answer 3

由于我使用的是FontAwesome V5.3.1，因此我想更新此答案，因为此版本中的文件夹结构有所更改。

1. 首先，下载FontAwesome v5.3.1并解压缩该文件夹。
2. all.min.css从CSS文件夹复制文件，然后将其添加到样式表中。
3. 现在，webfonts从FontAwesome解压缩中复制文件夹，并将其放置到all.min.css文件上方一个目录中的项目中。（请参考下图）

由于all.min.css文件webfonts现在是指文件夹，因此我们需要将此文件与webfonts文件夹一起添加。

src: url("../webfonts/fa-brands-400.eot"); // This is how it is been referred now in all.min.css file.

谢谢。

Answer 4

您可能会发现您喜欢的浏览器中的开发人员选项可以让您了解文件无法正常工作的原因.

字体真棒需要随附的字体文件.CSS文件将引用这些并尝试包含它们,但目前无法找到它们.

从FontAwesome下载font-awesome-4.1.0.zip

然后解压缩并将css和fonts文件夹放入项目中.然后,您可以将文件引用为:

<link href="css/font-awesome.min.css" rel="stylesheet">