blocks|key|180251|text|根据documentation+(步骤3)，您需要修改提供的CSS文件以指向您站点上的字体位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|180252|entityMap|0|LINK|mutability|MUTABLE|url|http://fortawesome.github.com/Font-Awesome/#integration^0|2|D|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

According to the <a href="http://fortawesome.github.com/Font-Awesome/#integration" rel="noreferrer">documentation</a> (step 3), you need to modify the supplied CSS file to point to the font location on your site.

blocks|key|180420|text|您必须有两个类：fa类和标识所需图标fa-twitter、fa-search等…的类|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|180421|
<i+class="fa-search">++++


<i+class="fa+fa-search">|code-block|syntax|javascript|180422|entityMap^0|8|2|I|A|T|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

You must have 2 classes, the <code>fa</code> class and the class that identifies the desired icon <code>fa-twitter</code>, <code>fa-search</code>, etc &hellip;

<pre><code>&lt;!-- Wrong --&gt;
&lt;i class="fa-search"&gt;&lt;/i&gt; 

&lt;!-- Correct --&gt;
&lt;i class="fa fa-search"&gt;&lt;/i&gt;
</code></pre>

blocks|key|180462|text|使用这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|180463|<link+href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"+rel="stylesheet">|code-block|syntax|javascript|180464|我在使用Amazon+Cloudfront+CDN时也遇到过类似的问题，但在我开始从maxcdn加载后，问题得到了解决|180465|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Use this 

<pre><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"&gt;
</code></pre>

I had similar issue with Amazon Cloudfront CDN but it got resolved after I started loading it from maxcdn

blocks|key|398192|text|如果使用LESS或SASS，请打开font-awesome.less/sass文件并编辑指向实际字体的path变量@fa-font-path:+"../font";：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|398193|@fa-font-path:+"../font";

@font-face+{
++font-family:+'FontAwesome';
++src:+url('@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1');
++src:+url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=3.0.1')+format('embedded-opentype'),
++++url('@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1')+format('woff'),
++++url('@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1')+format('truetype');
++font-weight:+normal;
++font-style:+normal;
}|code-block|syntax|javascript|398194|与CSS相同，除非您在@font-face声明块中编辑路径：|398195|@font-face+{
++font-family:+'FontAwesome';
++src:+url('your/path/fontawesome-webfont.eot?v=3.0.1');
++src:+url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1')+format('embedded-opentype'),
++++url('your/path/fontawesome-webfont.woff?v=3.0.1')+format('woff'),
++++url('your/path/fontawesome-webfont.ttf?v=3.0.1')+format('truetype');
++font-weight:+normal;
++font-style:+normal;
}|398196|entityMap^0|1L|P|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

If you are using LESS or SASS, open the font-awesome.less/sass file and edit the path variable <code>@fa-font-path: "../font";</code> which points to the actual fonts:

<pre><code>@fa-font-path: "../font";

@font-face {
 font-family: 'FontAwesome';
 src: url('@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1');
 src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&amp;v=3.0.1') format('embedded-opentype'),
 url('@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
 url('@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
 font-weight: normal;
 font-style: normal;
}
</code></pre>

Same with CSS, except you edit the path in the @font-face declaration block:

<pre><code>@font-face {
 font-family: 'FontAwesome';
 src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
 src: url('your/path/fontawesome-webfont.eot?#iefix&amp;v=3.0.1') format('embedded-opentype'),
 url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
 url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
 font-weight: normal;
 font-style: normal;
}
</code></pre>

blocks|key|398503|text|打开font-awesome.css，代码如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398504|@font-face+{
++font-family:+'FontAwesome';
++src:+url('../fonts/fontawesome-webfont.eot?v=4.5.0');
++src:+url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0')+format('embedded-opentype'),+url('../fonts/fontawesome-webfont.woff2?v=4.5.0')+format('woff2'),+url('../fonts/fontawesome-webfont.woff?v=4.5.0')+format('woff'),+url('../fonts/fontawesome-webfont.ttf?v=4.5.0')+format('truetype'),+url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular')+format('svg');
++font-weight:+normal;
++font-style:+normal;
}|code-block|syntax|javascript|398505|您必须具有类似以下内容的文件夹：|398506|font+awesome+->+css
+++++++++++++->+fonts|398507|或者是最简单的方法：|398508|<link+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">|398509|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Open your font-awesome.css
theres code like :

<pre><code>@font-face {
 font-family: 'FontAwesome';
 src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
 src: url('../fonts/fontawesome-webfont.eot?#iefix&amp;v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
 font-weight: normal;
 font-style: normal;
}
</code></pre>

you must have folder like :

<pre><code>font awesome -&gt; css
 -&gt; fonts
</code></pre>

or the easiest way :

<pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
</code></pre>

blocks|key|398399|text|我试图用之前的一些解决方案来解决同样的问题，但它们在我的情况下不起作用。最后，我在HEAD中添加了这两行代码，它起作用了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398400|<link+rel="stylesheet"+href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link+rel="stylesheet"+href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">+++|code-block|syntax|javascript|398401|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I tried to solve the same problem with a few previous solutions, but they didn't work in my situation.
Finally, I added these 2 lines in HEAD and it worked:

<pre><code>&lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"&gt;
&lt;link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css"&gt; 
</code></pre>

blocks|key|398421|text|我有这个问题。问题是我有一个字体系列的CSS样式，它的！重要覆盖了字体。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398422|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I had this issue. The problem was I had a font-family CSS style with !important overriding the fontawesome font.

blocks|key|398666|text|我遇到了这个问题，并完成了每一步carefully...even，尽管我一直在为ages...and使用FA，然后我意识到我的邮件css文件中有这一行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398667|*+{
font-family:+Arial+!important;
}|code-block|syntax|javascript|398668|这是一个愚蠢的错误，但这可能会在未来给某人提供提示！|398669|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I had this issue and went through each step carefully...even though I've been using FA for ages...and then I realized I had this line in my mail css file:

<pre><code>* {
font-family: Arial !important;
}
</code></pre>

Silly mistake, but this could tip off someone in future!

blocks|key|180834|text|截至2018年12月，我发现使用托管在bootstrapcdn上的稳定版本4.7.0比使用font-awesome+5.x.x+cdn+on+their+website更容易--因为每次升级次要版本时，以前的版本都会崩溃。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|180835|<link+media="all"+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">|code-block|syntax|javascript|180836|图标是相同的：|180837|<i+class="fa+fa-facebook">|180838|entityMap|0|LINK|mutability|MUTABLE|url|https://fontawesome.com/start^0|19|13|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

As of Dec 2018, I find it easier to use the stable version 4.7.0 hosted on bootstrapcdn instead of the <a href="https://fontawesome.com/start" rel="noreferrer">font-awesome 5.x.x cdn on their website</a> -- since every time they upgrade minor versions the previous version WILL break.

<pre><code>&lt;link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
</code></pre>

Icons are the same:

<pre><code>&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;
</code></pre>

blocks|key|180980|text|font-weight:+900;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|180981|我在使用Font+Awese5时遇到了一个不同的问题，对于FontAwesome图标，默认的字体粗细应该是900，但对于span和I标签，我将其改写为400。当我纠正它的时候，它就起作用了。|180982|下面是他们的Github页面https://github.com/FortAwesome/Font-Awesome/issues/11946中的问题引用|180983|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/FortAwesome/Font-Awesome/issues/11946^0|0|H|0|0|E|1K|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@]|D|@$9|W|A|X|1|Y]]|E|$]]|$1|J|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

<code>font-weight: 900;</code>
I had a different issue with Font Awesome 5.
Default font-weight should be 900 for FontAwesome icons but I overwrote it to 400 for span and i tags.
It just worked, when I corrected it.
Here is the issue reference in their Github page, <a href="https://github.com/FortAwesome/Font-Awesome/issues/11946" rel="nofollow noreferrer">https://github.com/FortAwesome/Font-Awesome/issues/11946</a>

blocks|key|398237|text|在新的3.0版本中，这应该会简单得多。最简单的方法是指向Bootstrap+CDN：http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|398238|entityMap|0|LINK|mutability|MUTABLE|url|http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome^0|16|1P|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

This should be much simpler in the new version 3.0. Easiest is to point to the Bootstrap CDN: <a href="http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome" rel="nofollow">http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome</a>

blocks|key|398261|text|如果您的服务器是IIS，请确保添加正确的MIME以提供.woff文件扩展名。正确的MIME是application/octet-stream|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|398262|entityMap^0|1A|O|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

If your server is IIS, be sure to add the correct MIME to serve .woff file extension.
The correct MIME is <code>application/octet-stream</code>

blocks|key|180686|text|您的字体路径可能不正确，因此css无法加载字体并呈现图标，因此您需要提供附加字体的搁置路径。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|180687|@font-face+{+
font-family:+"FontAwesome";
src:+url("fonts/fontawesome-webfont.eot");
}|code-block|syntax|javascript|180688|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

It could be possible that your font path is not correct so that css not able to load the font and render the icons so you need to provide the stranded path of attached fonts.

<pre><code>@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
</code></pre>

blocks|key|180690|text|使用此<i+class="fa+fa-camera-retro"+>您尚未定义fa类|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|180691|entityMap^0|3|Z|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Use this <code>&lt;i class="fa fa-camera-retro" &gt;&lt;/i&gt;</code> you have not defined fa classes

blocks|key|398914|text|从版本5开始，如果您从此站点下载了软件包：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398915|https://fontawesome.com/download|offset|length|398916|字体在all.css和all.min.css文件中。|398917|这是你的引用现在使用最新版本时的样子(替换为你的文件夹)：|398918|<link+href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css"+rel="stylesheet">|code-block|syntax|javascript|398919|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|W|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|12|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|C]]]]

Starting in version 5, if you downloaded the package from this site:

<a href="https://fontawesome.com/download" rel="nofollow noreferrer">https://fontawesome.com/download</a>

The fonts are in the all.css and all.min.css file.

This is what your reference would look like using the latest version now (replace with your folder):

<pre><code>&lt;link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet"&gt;
</code></pre>

blocks|key|180388|text|我已经从3.2.1更改为4.0.1，文件夹是字体，现在叫做字体。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|180389|src:+url('../font/fontawesome-webfont.eot?v=3.2.1');

src:+url('../fonts/fontawesome-webfont.eot?v=4.0.1');|code-block|syntax|javascript|180390|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I have changed from 3.2.1 to 4.0.1 and the folder was font and now is called fonts.
<pre><code>src: url('../font/fontawesome-webfont.eot?v=3.2.1');

src: url('../fonts/fontawesome-webfont.eot?v=4.0.1');
</code></pre>

blocks|key|398609|text|仔细检查fontawesome+all.css文件-在最底部会有一个webfonts文件夹的路径。我的文件中有"../webfonts“格式，这意味着css文件将从它所在的位置向上看1级。因为我所有的css文件都在css文件夹中，而我将字体添加到了同一文件夹中，所以这不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398610|只需将fonts文件夹上移一层，一切都会好起来的:)|398611|使用Font+Awese5.0进行了测试|398612|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

Double check the fontawesome-all.css file - at the very bottom there will be a path to the webfonts folder. Mine had "../webfonts" format in it, which meant that the css file would be looking 1 level up from where it is. As all of my css files were in css folder and I added the fonts to the same folder, this was not working.

Just move your fonts folder up a level and all should be well :)

Tested with Font Awesome 5.0

blocks|key|180765|text|与上层类一起使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|180766|<div+class="container">
++<i+class="fa+fa-facebook">
</div>|code-block|syntax|javascript|180767|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use with the upper class

<pre><code>&lt;div class="container"&gt;
 &lt;i class="fa fa-facebook"&gt;&lt;/i&gt;
&lt;/div&gt;
</code></pre>

blocks|key|398978|text|css/all.css文件包含核心样式，以及使用Font+Awesome时需要的所有图标样式。/webfonts文件夹包含上述CSS引用和依赖的所有字体文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398979|将整个/webfonts文件夹和/css/all.css复制到项目的静态资产目录中(或者您希望保存前端资产或供应商资料的任何位置)。|398980|将对复制的/css/all.css文件的引用添加到要在其上使用Font+Awesome的每个模板或页面的中。|398981|只要访问-+https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself，你就会得到答案。|offset|length|398982|entityMap|0|LINK|mutability|MUTABLE|url|https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself^0|0|0|0|6|29|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@$H|V|I|W|1|X]]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

The /css/all.css file contains the core styling plus all of the icon styles that you’ll need when using Font Awesome. The /webfonts folder contains all of the typeface files that the above CSS references and depends on.

Copy the entire /webfonts folder and the /css/all.css into your project’s static assets directory (or where ever you prefer to keep front end assets or vendor stuff).

Add a reference to the copied /css/all.css file into the of each template or page that you want to use Font Awesome on.

Just Visit - <a href="https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself" rel="nofollow noreferrer">https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself</a>
You will get the answer.

blocks|key|180553|text|它对我不起作用，因为我在apache配置中为根目录设置了Allow+from+none指令。这是我如何让它工作的.|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|180554|我的目录结构：|180555|root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html|code-block|syntax|javascript|180556|我的index.html有：|180557|<link+rel="stylesheet"+href="../font-awesome/4.4.0/css/font-awesome.min.css">|180558|我选择继续禁止访问我的根目录，而是在我的apache配置中为根目录添加了另一个目录条目/font-+added+/|180559|<Directory+"/path/root/font-awesome/">
++++Allow+from+all
</Directory>|180560|entityMap^0|S|F|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|13|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|U|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|V|$]]

It wasn't working for me because I had <code>Allow from none</code> directive for the root directory in my apache config. Here's how I got it to work...

My directory structure:

<pre><code>root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html
</code></pre>

where my index.html has:

<pre><code>&lt;link rel="stylesheet" href="../font-awesome/4.4.0/css/font-awesome.min.css"&gt;
</code></pre>

I chose to continue to disallow access to my root and instead added another directory entry in my apache config for root/font-awesome/ 

<pre><code>&lt;Directory "/path/root/font-awesome/"&gt;
 Allow from all
&lt;/Directory&gt;
</code></pre>

blocks|key|398532|text|我的问题是添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398533|<link+rel="stylesheet"+href="bower_components/font-awesome/css/font-awesome.min.css">|code-block|syntax|javascript|398534|在一个|398535|
|398536|标签|398537|我把它放在标签外面修复了它。|398538|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

My problem was with adding the 

<pre><code>&lt;link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"&gt;
</code></pre>

inside a 

<pre><code>&lt;!-- build:css assets/styles/main.css --&gt;
&lt;!-- endbuild --&gt;
</code></pre>

tag

I fixed it by placing it outside the tag.

blocks|key|398593|text|我(在我的Windows7机器上)解决这个问题的方法是解密我的项目目录。在测试你的网站时，最初会出现多少视觉和功能上的小故障，这真是太疯狂了。只需进入命令提示符并运行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398594|attrib+-R+%25PROJECT_PATH%25\*.*+/S
cipher+/a+/d+/s:%25PROJECT_PATH%25|code-block|syntax|javascript|398595|...where+%25PROJECT_PATH%25是存储代码的目录的完整路径名。|398596|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

What fixed the issue for me (on my Windows 7 machine) was decrypting my project directory. It's crazy how many visual and functional glitches originally arise from that when testing your website. Just get to a command prompt and run:

<pre><code>attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%
</code></pre>

...where %PROJECT_PATH% is the full pathname to the directory where your code is stored.

blocks|key|398628|text|现在，在fontawese5中，你可以通过Https提供JS的缓存版本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398629|<script+defer+src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"+integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl"+crossorigin="anonymous"></script>|code-block|syntax|javascript|398630|有关https://fontawesome.com/get-started/svg-with-js的更多信息|offset|length|398631|entityMap|0|LINK|mutability|MUTABLE|url|https://fontawesome.com/get-started/svg-with-js^0|0|0|2|1B|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Now in fontawesome 5 you can deliver a cached version of JS over Https. 

<pre><code>&lt;script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"&gt;&lt;/script&gt;
</code></pre>

More info on <a href="https://fontawesome.com/get-started/svg-with-js" rel="nofollow noreferrer">https://fontawesome.com/get-started/svg-with-js</a>

blocks|key|398753|text|如此多的答案，所以我添加了我的工作(如果你不使用PRO，请更改名称)：在_typography.less中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398754|//
//++Common
//++_____________________________________________

&+when+(@media-common+=+true)+{
++.lib-font-face(
++++@family-name:+@font-family-name__fontawsomeregular,
++++@font-path:+'@{baseDir}fonts/webfonts/fa-regular-400',
++++@font-weight:+400,
++++@font-style:+normal
++);
++.lib-font-face(
++++@family-name:+@font-family-name__fontawsomelight,
++++@font-path:+'@{baseDir}fonts/webfonts/fa-light-300',
++++@font-weight:+300,
++++@font-style:+normal
+++);
++.lib-font-face(
++++@family-name:+@font-family-name__fontawsomebrands,
++++@font-path:+'@{baseDir}fonts/webfonts/fa-brands-400',
++++@font-weight:+normal,
++++@font-style:+normal
++);
++.lib-font-face(
++++@family-name:+@font-family-name__fontawsomesolid,
++++@font-path:+'@{baseDir}fonts/webfonts/fa-solid-900',
++++@font-weight:+900,
++++@font-style:+normal
++);
}|code-block|syntax|javascript|398755|在_theme.less中|398756|@import+'../includes/fontawesome/fontawesome.less';
@fa-font-path:+'@{baseDir}fonts/webfonts';

//++Fonts
@font-family-name__fontawsomeregular:+'Font+Awesome+5+Pro';
@font-family-name__fontawsomelight:+'Font+Awesome+5+Pro';
@font-family-name__fontawsomebrands:+'Font+Awesome+5+Brands';
@font-family-name__fontawsomesolid:+'Font+Awesome+5+Pro';|398757|和用法示例：|398758|+.my-newclass:before{
+++++content:+'\f002';
+++++display:+inline-block;
+++++float:+left;
+++++font-family:++@font-family-name__fontawsomelight;
+++++font-size:+16px;
}|398759|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

So many answers so I add my working for me (Change name if you dont use PRO):
In _typography.less

<pre><code>//
// Common
// _____________________________________________

&amp; when (@media-common = true) {
 .lib-font-face(
 @family-name: @font-family-name__fontawsomeregular,
 @font-path: '@{baseDir}fonts/webfonts/fa-regular-400',
 @font-weight: 400,
 @font-style: normal
 );
 .lib-font-face(
 @family-name: @font-family-name__fontawsomelight,
 @font-path: '@{baseDir}fonts/webfonts/fa-light-300',
 @font-weight: 300,
 @font-style: normal
 );
 .lib-font-face(
 @family-name: @font-family-name__fontawsomebrands,
 @font-path: '@{baseDir}fonts/webfonts/fa-brands-400',
 @font-weight: normal,
 @font-style: normal
 );
 .lib-font-face(
 @family-name: @font-family-name__fontawsomesolid,
 @font-path: '@{baseDir}fonts/webfonts/fa-solid-900',
 @font-weight: 900,
 @font-style: normal
 );
}
</code></pre>

In _theme.less

<pre><code>@import '../includes/fontawesome/fontawesome.less';
@fa-font-path: '@{baseDir}fonts/webfonts';

// Fonts
@font-family-name__fontawsomeregular: 'Font Awesome 5 Pro';
@font-family-name__fontawsomelight: 'Font Awesome 5 Pro';
@font-family-name__fontawsomebrands: 'Font Awesome 5 Brands';
@font-family-name__fontawsomesolid: 'Font Awesome 5 Pro';
</code></pre>

and example of usage:

<pre><code> .my-newclass:before{
 content: '\f002';
 display: inline-block;
 float: left;
 font-family: @font-family-name__fontawsomelight;
 font-size: 16px;
}
</code></pre>

blocks|key|398803|text|请添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398804|@import+'https://****.net/*********/font-awesome.min.css';
@font-face+{
++++font-family:+'FontAwesome';
++++src:+url('https://****.net/*********/FontAwesome.otf');
++++src:+url('https://****.net/*********/FontAwesome.otf?#iefix')
}|code-block|syntax|javascript|398805|这是您的css顶部，下载和链接的css和字体正确，问题是由于FontAwesome没有正确加载。|398806|谢谢|398807|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Please add 

<pre><code>@import 'https://****.net/*********/font-awesome.min.css';
@font-face {
 font-family: 'FontAwesome';
 src: url('https://****.net/*********/FontAwesome.otf');
 src: url('https://****.net/*********/FontAwesome.otf?#iefix')
}
</code></pre>

This to top of your css, download and link the css and font correctly, the problem is due to FontAwesome not loading correctly.

Thanks

blocks|key|398967|text|如果MIME类型已经具有.woff和.woff2文件类型，但仍然给出HTTP404错误，请检查请求过滤。如果这是限制性的，添加这些文件类型，这些文件类型允许服务，它就会起作用。看看这个！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398968|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If the MIME TYPE is already having the .woff and .woff2 file types and still it's giving HTTP-404 error, check the request filtering. If this is restrictive, add these file types these with allow to serve and it shall work. Check it out!

So I'm trying to prototype a marketing page and I'm using Bootstrap and the new Font Awesome file. The problem is that when I try to use an icon, all that gets rendered on the page is a big square. 

Here's how I include the files in the head:

<pre><code>&lt;head&gt;
 &lt;title&gt;Page Title&lt;/title&gt;
 &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
 &lt;link rel="stylesheet" href="css/bootstrap-responsive.css"&gt;
 &lt;link rel="stylesheet" href="css/font-awesome.css"&gt;
 &lt;link rel="stylesheet" href="css/app.css"&gt;
 &lt;!--[if IE 7]&gt;
 &lt;link rel="stylesheet" href="css/font-awesome-ie7.min.css"&gt;
 &lt;![endif]--&gt;
&lt;/head&gt;
</code></pre>

And here's an example of me trying to use an icon:

<pre><code>&lt;i class="icon-camera-retro"&gt;&lt;/i&gt;
</code></pre>

But all that gets rendered in a big square. Does anyone know what could be going on?

Font Awesome not working, icons showing as squares

服务器

所以我正在尝试制作一个营销页面的原型，我正在使用Bootstrap和新的Font Awesome文件。问题是，当我尝试使用图标时，在页面上呈现的都是一个大方块。下面是我如何在头部包含文件的方法：<head> <title>Page Title</title> <link rel="stylesheet" href="css/bootstrap.css">

问字体不工作，图标显示为正方形
EN

回答 26

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字体不工作，图标显示为正方形EN

回答 26

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字体不工作，图标显示为正方形
EN