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

How to include local file of font awesome 4.1 without using CDN?

提问by user3066033

This is the effect with font awesome, i only can get it when i using font awesome 4.1 CDN)

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

Using downloaded files, I included the fonts folder and font-awesome.css, but still no icon appear.

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

My link which is correct.

我的链接是正确的。

The font-awesome.css file path, i didn't change anything.

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

directory folders and files.

目录文件夹和文件。

inside of font folder.

字体文件夹里面。

inside css folder.

在 css 文件夹中。

*********************************************************************************************************************************
I got the problem solved already. This is due to mistake in typing code. I type in fontawesome v3.1 style

****************************************************** ****************************************************** *****************************
我已经解决了问题。这是由于键入代码错误造成的。我以 fontawesome v3.1 风格输入

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

and now i am using v4.1, that's why it didn't work. It should be

现在我使用的是 v4.1，这就是它不起作用的原因。它应该是

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

to make it work.

使其工作。

回答by Sithira

1. Download the fontawesome package from their website.
2. Extract the package where you will find the fontawesome.css file.
3. Copy this file to your css directory
4. copy all the fonts files from the extracted fontawesome package to your fonts folder.
5. Finally add the fontawesome.css to your html page by giving respective location of the css file.

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

AND Voila !

瞧！

回答by Srinivas08

Just Downloading Css and linking to the file will not make sense,You should look into the css file....

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

You havent Downloaded the fonts folder in which all fonts styles are stored... So Download it and give path to the font files located on your system , I have shown the links in boxes which you need to add links in font-awesome css files..

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

Download fonts from the cdn links and store in fonts folder..

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

Hope this will work for you..

希望这对你有用..

回答by Balasubramani M

Since I am using FontAwesome V5.3.1, I would like to update this answer since the folder structure was changed a bit in this version.

由于我使用的是 FontAwesome V5.3.1，我想更新这个答案，因为在这个版本中文件夹结构发生了一些变化。

1. First, download the FontAwesome v5.3.1and extract the folder.
2. Copy the all.min.cssfile from the CSS folder and add it in your stylesheets.
3. Now, Copy the webfontsfolder from FontAwesome extract and place it into your project one directory above to your all.min.cssfile. (Refer the image below)

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

Since all.min.cssfile refers to the webfontsfolder now, we need to add this file along with the webfontsfolder.

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

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

Thank you.

谢谢你。

回答by Joshua Griffiths

You may find that the developer options in your favorite browser will give you an idea why the file is not working.

您可能会发现，您最喜欢的浏览器中的开发人员选项会让您了解文件不起作用的原因。

Font awesome requires the font files which come with it. The CSS file will reference these and try to include them, but currently won't be able to find them.

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

Download font-awesome-4.1.0.zip from FontAwesome

从FontAwesome下载font-awesome-4.1.0.zip

Then extract this and put the css and fonts folders into your project. You can then reference the file as:

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

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

回答by CKuharski

1. Download fontawesome (font-awesome-4.7.0) : http://fontawesome.io/get-started/
2. Unzip and copy into your project as-is.
3. In HTML reference font-awesome.min.css e.g: <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">

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

回答by vivek shirodkar

It is important to ensure relative links to eot & woff files other than css, in case you are using .htaccess

如果您使用的是 .htaccess，请务必确保与 css 以外的 eot 和 woff 文件的相关链接

1) extract downloaded zip file to desired directory

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

in case .htaccess path is

如果 .htaccess 路径是

H:\virtualhost\ .htaccess

H:\虚拟主机\.htaccess

and fontawesome css and fonts path is

和 fontawesome css 和字体路径是

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

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

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

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

2) Make following entries in .htaccess

2) 在 .htaccess 中输入以下条目

RewriteRule ^css/([^/]*).css$ /fontawesome-free-5.4.2-web/css/$1.css [L]

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/([^/]*).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/([^/]*).woff2$ /fontawesome-free-5.4.2-web/webfonts/$1.woff2 [L]

RewriteRule ^webfonts/([^/]*).woff$ /fontawesome-free-5.4.2-web/webfonts/$1.woff [L]

RewriteRule ^webfonts/([^/]*).woff$ /fontawesome-free-5.4.2-web/webfonts/$1.woff [L]

3) Add following in head part of html

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

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

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