Question

With font awesome effect 这是字体真棒的效果，我只能在使用字体真棒4.1 CDN时才能得到它

enter image description here 使用下载的文件，我包括fonts文件夹和font-awesome.css，但仍然没有显示图标。

enter image description here 我的链接是正确的。

enter image description here font-awesome.css文件路径，我没有改变任何东西。

enter image description here 目录文件夹和文件。

enter image description here 在字体文件夹里面。

enter image description here 在css文件夹里面。

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

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

现在我正在使用v4.1，这就是它无效的原因。它应该是

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

让它发挥作用。

Answer 1

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

和Voila！

Answer 2

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

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

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

bootstram font awesome

希望这对你有用..

Answer 3

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

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

从FontAwesome

下载font-awesome-4.1.0.zip

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

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

Answer 4

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

首先，下载FontAwesome v5.3.1并解压缩文件夹。
从CSS文件夹中复制all.min.css文件，并将其添加到样式表中。
现在，从FontAwesome摘录中复制webfonts文件夹，并将其放置到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 5

这个 link 很有帮助。并为我工作。

转到 Font Awesome.com 并下载适用于网络的字体。
提取此文件。
将 webfonts 文件从 font awesome（下载文件）放到您的项目文件中。（删除文件夹的其余部分:)）
制作新的 txt 并将 all.css 文件复制到其中。（将其命名为 font.css 并将其放入 css 文件夹）。
添加<link rel="stylesheet" href="css/fonts.css"

Answer 6

转到网络控制台，打开字体过滤器
查看后台下载了哪些文件
右键单击并在新选项卡中打开...它将下载该文件
将它们放在服务器存储的根目录中

例如。 htdocs/webfonts/fa-solid900.woff2

最终下载 all.css 文件并链接到您的头部部分

提前欢迎:)

使用开发者工具搜索所需文件

本地下载文件

同时下载 all.css 或任何你使用的 CDN

将下载的字体文件放在这个webfonts/文件夹

Answer 7

下载fontawesome（font-awesome-4.7.0）：http://fontawesome.io/get-started/
按原样解压缩并复制到您的项目中。
在HTML参考font-awesome.min.css中，例如：<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">

Answer 8

在使用.htaccess的情况下，确保相对于css以外的eot＆woff文件的相对链接很重要

1）将下载的zip文件解压缩到所需目录

如果.htaccess路径为

H：\ virtualhost \ .htaccess

和字体很棒的CSS和字体路径是

H：\ virtualhost \ fontawesome-free-5.4.2-web \ css

H：\ virtualhost \ fontawesome-free-5.4.2-web \ webfonts

2）在.htaccess中输入以下内容

RewriteRule ^ css /（[[^ /] *）。css $ /fontawesome-free-5.4.2-web/css/$1.css [L]

RewriteRule ^ webfonts /（[[^ /] *）。eot $ /fontawesome-free-5.4.2-web/webfonts/$1.eot [L]

RewriteRule ^ webfonts /（[^ /] *）。woff2 $ /fontawesome-free-5.4.2-web/webfonts/$1.woff2 [L]

RewriteRule ^ webfonts /（[^ /] *）。woff $ /fontawesome-free-5.4.2-web/webfonts/$1.woff [L]

3）在html的头部添加以下内容

http://local-ip-address:port/css/all.css

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

8 个答案: