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

【问题标题】：How to include local file of font awesome 4.1 without using CDN?如何在不使用 CDN 的情况下包含 font awesome 4.1 的本地文件？
【发布时间】：2014-10-17 17:00:43
【问题描述】：

这是font awesome的效果，我只有在使用font awesome 4.1 CDN时才能得到）

使用下载的文件，我包含了字体文件夹和 font-awesome.css，但仍然没有出现图标。

我的链接是正确的。

font-awesome.css 文件路径，我什么都没改。

目录文件夹和文件。

在字体文件夹内。

在 css 文件夹中。

**************************************************** *********
我还是没能显示图标，为什么？？

【问题讨论】：

标签： html css twitter-bootstrap fonts

【解决方案1】：

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

瞧！

【讨论】：

现在我得到了包含 5 个文件的字体文件夹，我复制了整个文件夹，我还在 css 目录中添加了 font-awesome.css。我按照你告诉我的所有步骤都做了，但是很遗憾，它仍然没有用，会发生什么？
你应该首先在你的根目录下创建一个名为 fonts 的目录。之后你应该将所有 fontawesome 的字体文件添加到该文件夹中（只有字体文件而不是 .css 文件）。然后复制 fontawesome。 css 进入您放置 .css 文件的目录。在这些步骤之后再试一次。如果仍然不起作用，请将 fontawesome.css 放在根目录中，然后再试一次。这肯定会工作=）
哦，您也应该更正 fontawesome.css 中的字体路径。在您的情况下，只需删除 src: url(...) 之后的点（仅前几个点）..那应该让它工作
我已经开始工作了。问题是我输入的是 v3.1 风格，但我使用的是 v4.1，所以它不起作用。
这个答案的方法在近 4 年后改变了文件夹结构命名（'fonts'->'webfonts'）并添加了 all.css，就像一个魅力。谢谢。

【解决方案2】：

由于我使用的是 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.

谢谢。

【讨论】：

这应该是正确答案，谢谢，你救了我的一天。

【解决方案3】：

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

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

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

希望这对你有用..

【讨论】：

【解决方案4】：

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

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

从FontAwesome下载font-awesome-4.1.0.zip

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

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

【讨论】：

【解决方案5】：

下载 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">

【讨论】：

【解决方案6】：

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

转到字体Awesome.com 并下载网络字体真棒。
解压此文件。
将来自 font awesome 的 webfonts 文件（下载文件）放到您的项目文件中。（删除文件夹的其余部分:)）
新建txt并将all.css文件复制到其中。（将其命名为 font.css 并将其放入 css 文件夹）。
添加<link rel="stylesheet" href="css/fonts.css"

【讨论】：

【解决方案7】：

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

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

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

提前欢迎:)

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

在本地下载文件

同时下载 all.css 或您正在使用的任何 cdn

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

【讨论】：

【解决方案8】：

从此链接https://fontawesome.com/download 下载适用于 Web 的“字体真棒”，解压缩文件夹，并在 index.html 中添加对 all.css 文件的引用

【讨论】：

【解决方案9】：

如果您使用的是 .htaccess，请务必确保指向除 css 之外的 eot 和 woff 文件的相对链接

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

如果 .htaccess 路径是

H:\virtualhost\.htaccess

fontawesome 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的head部分添加以下内容

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

【讨论】：