blocks|key|1736704|text|在我的例子中，我在css代码中犯了以下错误。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1736705|*{
++++font-family:+'Open+Sans',+sans-serif+!important;
}|code-block|syntax|javascript|1736706|这将覆盖整个页面的所有字体系列规则。我的解决方案是像这样把代码移到正文中。|1736707|body{
++++font-family:+'Open+Sans',+sans-serif;
}|1736708|注意:无论何时在css中使用!important标志，在同一元素上声明的相同类型的任何其他css规则都将被覆盖。|offset|length|style|CODE|1736709|entityMap^0|0|0|0|0|E|A|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|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

In my case i made the following mistake in my css code.

<pre><code>*{
 font-family: 'Open Sans', sans-serif !important;
}
</code></pre>

This will override all font family rules for the entire page.
My solution was to move the code to body like so.

<pre><code>body{
 font-family: 'Open Sans', sans-serif;
}
</code></pre>

NB: Whenever you use the <code>!important</code> flag in css, any other css rule declared of the same type on the same element will get overriden.

blocks|key|5263757|text|当您打开font-awesome.min.css时，您可以看到以下路径：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5263758|'Fonts/fontawesome-webfont.ttf?v=4.2.0'+...|code-block|syntax|javascript|5263759|这意味着您必须创建目录Fonts，然后将文件fontawesome-webfont.ttf+(fontawesome-webfont.woff、fontawesome-webfont.eot)复制到此文件夹中。在那之后，一切都会正常工作。|5263760|entityMap^0|4|K|0|0|B|5|M|N|1B|O|20|N|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$]]

When you open <code>font-awesome.min.css</code> you can see following path:

<pre><code>'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...
</code></pre>

It means that you have to create directory <code>Fonts</code> and then copy files <code>fontawesome-webfont.ttf</code> (<code>fontawesome-webfont.woff</code>, <code>fontawesome-webfont.eot</code>) to this folder. After that everything should work fine.

blocks|key|3846544|text|请注意，新版本(5)的字体aware使用"fas"或"fab"而不是"fa"前缀。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3846545|引用自他们的网站：|3846546|fab前缀在版本5中已被弃用。新的默认值是fas+solid样式和|3846547|品牌样式。|blockquote|3846548|3846549|3846550|这就是我的字体显示空白方块的原因。现在修复了。|3846551|示例代码：|3846552|<a+class="nav-link"+href="//www.facebook.com/xxx"+target="_blank"><i+class="fab+fa-facebook-f"></a>|code-block|syntax|javascript|3846553|请参阅：https://fontawesome.com/icons/facebook-f?style=brands|3846554|entityMap|0|LINK|mutability|MUTABLE|url|https://fontawesome.com/icons/facebook-f?style=brands^0|K|5|Q|5|Y|4|0|0|0|0|0|0|0|0|0|4|1H|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1F|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1G|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1J|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1K|8|@]|D|@]|E|$]]|$1|S|3|T|5|U|7|1L|8|@]|D|@]|E|$V|W]]|$1|X|3|Y|5|6|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|Z|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|10|$11|$5|12|13|14|E|$15|16]]]]

Be aware that the new version (5) of font awesome uses <code>"fas"</code> or <code>"fab"</code> instead of <code>"fa"</code> prefix.

Quoted from their website: 

<blockquote>
 The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
</blockquote>

This is why my fonts were showing blank squares. Now fixed.

Example code:

<pre><code>&lt;a class="nav-link" href="//www.facebook.com/xxx" target="_blank"&gt;&lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt;&lt;/a&gt;
</code></pre>

See: <a href="https://fontawesome.com/icons/facebook-f?style=brands" rel="noreferrer">https://fontawesome.com/icons/facebook-f?style=brands</a>

blocks|key|5263893|text|首先，检查是否有class="fa“以及图标的类。所以，不仅仅是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5263894|<i+class="fa-pencil"+title="Edit">|code-block|syntax|javascript|5263895|但同时也|5263896|<i+class="fa+fa-pencil"+title="Edit">+|5263897|然后它就可以按预期工作了。这解决了我的问题。|5263898|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

First, check that you have class="fa" as well as whatever the icon's class is. So, not just

<pre><code>&lt;i class="fa-pencil" title="Edit"&gt;&lt;/i&gt;
</code></pre>

But also

<pre><code>&lt;i class="fa fa-pencil" title="Edit"&gt;&lt;/i&gt; 
</code></pre>

Then it works as expected. This solved my issue.

blocks|key|1736679|text|打开font-awesome.css，代码如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1736680|@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|1736681|您必须具有类似以下内容的文件夹：|1736682|font+awesome+->+css
+->+fonts|1736683|或者是最简单的方法：|1736684|<link+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">|1736685|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|1491301|text|我正在处理同样的问题，然后我发现我必须使用新版本(5或更高版本)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1491302|使用这个cdn就可以了。|1491303|<link+href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"+rel="stylesheet">|code-block|syntax|javascript|1491304|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

i was dealing with the same problem then i figured it out i have to use new version (5 and plus)

use this cdn it will work.

<pre><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"&gt;
</code></pre>

blocks|key|3846113|text|检查CSS文件的路径是否正确。更喜欢绝对链接，它们更容易理解，因为我们知道我们从哪里开始，搜索引擎也会更喜欢它们而不是相对链接。为了减少带宽，可以使用字体强大的服务器上的链接：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3846114|<link+rel="stylesheet"+href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"+type="text/css">|code-block|syntax|javascript|3846115|此外，如果您使用它，将不需要上传额外的字体到您的服务器，您将确保您指向正确的CSS文件，您还将立即受益于最新的更新。|BOLD|3846116|entityMap^0|2|3|0|0|A|H|12|3|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|S|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|T|8|@$9|U|A|V|B|M]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|O|$]]

Check that the path to your <code>CSS</code> file is correct. Rather prefer absolute links, they are easier to understand since we know where we start from and search engines will also prefer them over relative links. And to reduce bandwidth rather use the link from font-awesome servers: 

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

Moreover if you use it, there will be no need of uploading extra fonts to your server and you will be sure that you point to the right <code>CSS</code> file, and you will also benefit from the latest updates instantly.

blocks|key|5264447|text|我也面临着同样的问题..因此，我在html代码中添加了一个链接，而不是下载字体棒极了，它起作用了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5264448|​|5264449|<script+src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"+integrity="sha256-2JRzNxMJiS0aHOJjG%2BliqsEOuBb6%2B%2B9cY4dSOyiijX4="+crossorigin="anonymous"></script>|code-block|syntax|javascript|5264450|5264451|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

i was facing the same issue..
so instead of downloading font awesome , i added a link in my html code and it worked.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
</div>
</div>

blocks|key|1736619|text|首先，您不应该同时拥有font-awesome.css和font-awesome.min.css|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1736620|通常，在开发过程中使用font-awesome.css，一旦对站点满意，就切换到font-awesome.min.css。|1736621|像这样的问题通常是由相对路径和位置引起的，所以请检查您的html文件相对于css的位置。|1736622|如果html文件在基目录中，而css在根目录之外的子文件夹中，则需要：href="./css/font-awesome.css"+(单句点)|1736623|entityMap^0|B|G|S|K|0|B|G|14|K|0|0|Z|T|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|M|$]]

For a start, you shouldn't have both <code>font-awesome.css</code> and <code>font-awesome.min.css</code>

Generally, use <code>font-awesome.css</code> during development, then switch to <code>font-awesome.min.css</code> once you're happy with the site.

Problems like this are often caused by relative paths and locations, so check where your html file is in relation to the css.

If your html file is in the base directory, and the css in a subfolder off the root, you would need:
<code>href="./css/font-awesome.css"</code> (single period)

blocks|key|1736948|text|上面所有的都是正确的，但是最重要的是，我的问题是我下载了FA5的免费版本，它没有：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1736949|font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')|code-block|syntax|javascript|1736950|我不能让v5工作，所以我在上面的帖子的帮助下恢复到4.7.0，它解决了我的问题。|1736951|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|$]]

All the above are correct however on top of that my issue was that I downloaded the free version of FA5 which doesn't have:

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

I could not get v5 to work so I reverted to 4.7.0 with the help of the posts above and it fixed my issue.

blocks|key|3846823|text|我使用的是FontAwesome专业版，我的解决方案是嵌入all.min.css而不是fontawesome.min.css。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3846824|entityMap^0|T|B|17|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

I'm using FontAwesome Pro, and the solution for me was to embed <code>all.min.css</code> instead of <code>fontawesome.min.css</code>.

blocks|key|5264739|text|这与v5有关，一些图标在旧版本中不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5264740|这个链接对我很有效！|5264741|<link+rel="stylesheet"+href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">|code-block|syntax|javascript|5264742|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

It's something to do with v5, some of the icons don't work with older versions.
This link worked for me!
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css&quot;&gt;
</code></pre>

blocks|key|5264199|text|对于那些使用SCSS和NPM包的用户，以下是我的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5264200|npm+i+--save+@fortawesome/fontawesome-free|offset|length|style|CODE|5264201|然后在SCSS文件(理想情况下是在应用程序根目录导入的SCSS文件)的顶部：|5264202|@import+'@fortawesome/fontawesome-free/css/fontawesome.css';
@import+'@fortawesome/fontawesome-free/css/all.css';|code-block|syntax|javascript|5264203|entityMap^0|0|0|16|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

For those of you using SCSS and the NPM package, here is my solution:

<code>npm i --save @fortawesome/fontawesome-free</code>

Then at the top of an SCSS file (ideally an SCSS file imported at the root of your application):

<pre><code>@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';
</code></pre>

blocks|key|3847138|text|在我的例子中，我需要结合sst和Bruno+Leveque的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3847139|通过免费的web，解压并将所有文件夹复制到/fontawesome/|3847140|link+|unordered-list-item|3847141|
+all.min.css而不是fontawesome.css中|3847142|示例Django：|3847143|#+in+myapplication/vendor/fontawesome/+everything+unpacked
<link+rel="stylesheet"+href="{%25+static+'myapplication/vendor/fontawesome/css/all.min.css'+%25}">|code-block|syntax|javascript|3847144|entityMap^0|0|0|0|0|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|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|W|8|@]|9|@]|A|$N|O]]|$1|P|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|Q|$]]

In my case, I needed to combine the answers from sst &amp; Bruno Leveque:
<ul>
<li><a href="https://fontawesome.com/download" rel="nofollow noreferrer">https://fontawesome.com/download</a></li>
<li>download via Free for web, unpack</li>
<li>copy all folders into /fontawesome/</li>
<li>link the all.min.css instead of fontawesome.css</li>
</ul>
Example Django:
<pre><code># in myapplication/vendor/fontawesome/ everything unpacked
&lt;link rel=&quot;stylesheet&quot; href=&quot;{% static 'myapplication/vendor/fontawesome/css/all.min.css' %}&quot;&gt;
</code></pre>

blocks|key|1486933|text|我使用他们的CDN和javascript+include成功地安装了Font+Awesome+(如this+page所述)。然后，我尝试将HTML和CSS复制到一些遗留页面，突然我看到的是空的方框而不是图标。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1486934|我看到了Daniel的回答(上面)，因为我的遗留CSS文件很大(而且很旧)，所以我怀疑这就是问题所在。然而，当我查看Chrome+DevTools时，它看起来真的像是加载了Font+Awesome：|1486935|​|1486936|📷|atomic|1486937|1486938|如果有问题，我希望看到删除的字体...然而，我真的用尽了我所有的选择，所以我检查了计算样式，并清楚地看到字体Awesome字体肯定没有被使用。(请参阅底部呈现的字体)|1486939|1486940|1486941|1486942|我的遗留CSS文件乱七八糟，我宁愿不去碰它，所以我这样做是作弊的-请不要告诉任何人:)|1486943|<a+class="nav-link+fa+fa-instagram"+style="font-family:FontAwesome;"+href="//www.instagram.com/xxxx/"+target="_blank"></a>|code-block|syntax|javascript|1486944|还需要注意的是，当我从Font+Awesome版本4.7.0升级到版本5.4.1时，这个问题就消失了！我使用this+setup+guide和这个超文本标记语言|1486945|<a+class="nav-link"+href="//www.instagram.com/xxxx/"+target="_blank"><i+class="fab+fa-instagram"></a>|1486946|entityMap|0|LINK|mutability|MUTABLE|url|https://fontawesome.com/v4.7.0/get-started/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/bf1606f69a82fa06370b52a14b3b7796.png|imageAlt|2|https://ask.qcloudimg.com/http-save/yehe-900000/98e9206599f3648e588f23a053ac0902.png|3|https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=svg-with-js^0|1D|9|0|0|0|0|0|1|1|0|0|0|0|0|1|2|0|0|0|0|1I|G|3|0|0^^$0|@$1|2|3|4|5|6|7|1J|8|@]|9|@$A|1K|B|1L|1|1M]]|C|$]]|$1|D|3|E|5|6|7|1N|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1O|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1P|8|@]|9|@$A|1Q|B|1R|1|1S]]|C|$]]|$1|K|3|G|5|6|7|1T|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|1U|8|@]|9|@]|C|$]]|$1|N|3|G|5|6|7|1V|8|@]|9|@]|C|$]]|$1|O|3|I|5|J|7|1W|8|@]|9|@$A|1X|B|1Y|1|1Z]]|C|$]]|$1|P|3|G|5|6|7|20|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|21|8|@]|9|@]|C|$]]|$1|S|3|T|5|U|7|22|8|@]|9|@]|C|$V|W]]|$1|X|3|Y|5|6|7|23|8|@]|9|@$A|24|B|25|1|26]]|C|$]]|$1|Z|3|10|5|U|7|27|8|@]|9|@]|C|$V|W]]|$1|11|3|-4|5|6|7|28|8|@]|9|@]|C|$]]]|12|$13|$5|14|15|16|C|$17|18]]|19|$5|1A|15|1B|C|$1C|1D|1E|-4]]|1F|$5|1A|15|1B|C|$1C|1G|1E|-4]]|1H|$5|14|15|16|C|$17|1I]]]]

I successfully installed Font Awesome using their CDN and javascript include (as described on <a href="https://fontawesome.com/v4.7.0/get-started/" rel="nofollow noreferrer">this page</a>). Then I tried to copy the HTML and CSS to some legacy pages and suddenly I saw empty square boxes instead of the icons.

I saw Daniel's answer (above) and because my legacy CSS file was huge (and years old) I suspected that was the issue. However when I looked in Chrome DevTools it really looked like Font Awesome was loaded:

<a href="https://i.stack.imgur.com/RdqUc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RdqUc.png" alt="Screenshot of CSS for Font Awesome Icon"></a>

I was expecting to see the font in strikeout if there was an issue... However I had really exhausted all my options so I checked the Computed Styles and saw clearly that the Font Awesome font was definitely not being used. (See the Rendered font at the bottom)

<a href="https://i.stack.imgur.com/4odyO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4odyO.png" alt="Font Awesome not being used"></a>

My legacy CSS file was a mess and I preferred not to touch it, so I cheated by doing this - please don't tell anyone :)

<pre><code>&lt;a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"&gt;&lt;/a&gt;
</code></pre>

Also to note, when I upgraded from Font Awesome version 4.7.0 to version 5.4.1 this issue went away! I used <a href="https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=svg-with-js" rel="nofollow noreferrer">this setup guide</a> and this HTML

<pre><code>&lt;a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"&gt;&lt;i class="fab fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;
</code></pre>

blocks|key|1736870|text|我认为你没有字体文件夹在你的根文件夹，如在哪里停留css文件夹。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1736871|演示|offset|length|style|BOLD|1736872|​|1736873|📷|atomic|1736874|1736875|和css文件夹类似于|1736876|1736877|1736878|1736879|与类似的和fonts文件夹|1736880|1736881|1736882|1736883|我希望它能为你工作。|1736884|谢谢你。|1736885|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/d5ad35af229ef449be77720e35383333.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/367eb4fff7cd7ac028e45310a8945192.png|2|https://ask.qcloudimg.com/http-save/yehe-900000/3be7fc00d01334debf0c73b08cdc50f1.png^0|0|0|2|0|0|0|1|0|0|0|0|A|0|0|0|1|1|0|0|4|9|0|0|1|0|0|1|0|1|2|0|0|1|0|0|A|0|0|4|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1I|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1J|8|@]|9|@$D|1K|E|1L|1|1M]]|A|$]]|$1|M|3|I|5|6|7|1N|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1O|8|@$D|1P|E|1Q|F|G]]|9|@]|A|$]]|$1|P|3|I|5|6|7|1R|8|@]|9|@]|A|$]]|$1|Q|3|K|5|L|7|1S|8|@]|9|@$D|1T|E|1U|1|1V]]|A|$]]|$1|R|3|I|5|6|7|1W|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1X|8|@$D|1Y|E|1Z|F|G]]|9|@]|A|$]]|$1|U|3|I|5|6|7|20|8|@$D|21|E|22|F|G]]|9|@]|A|$]]|$1|V|3|K|5|L|7|23|8|@$D|24|E|25|F|G]]|9|@$D|26|E|27|1|28]]|A|$]]|$1|W|3|I|5|6|7|29|8|@$D|2A|E|2B|F|G]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|2C|8|@$D|2D|E|2E|F|G]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|2F|8|@$D|2G|E|2H|F|G]]|9|@]|A|$]]|$1|11|3|-4|5|6|7|2I|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18|19|-4]]|1A|$5|14|15|16|A|$17|1B|19|-4]]|1C|$5|14|15|16|A|$17|1D|19|-4]]]]

I think you have not fonts folder in your root folder like where stay css folder.

Demo

<a href="https://i.stack.imgur.com/41hrj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/41hrj.png" alt="enter image description here"></a>

And css folder is like

<a href="https://i.stack.imgur.com/3LKjs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3LKjs.png" alt="enter image description here"></a>

And fonts folder like

<a href="https://i.stack.imgur.com/Fjank.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fjank.png" alt="enter image description here"></a>

I hope it will work for you.

Thanks you.

blocks|key|1486855|text|在我的例子中:你需要复制整个css文件到你的项目文件夹，而不仅仅是文件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1486856|entityMap^0|O|9|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|$]]

In my case: 
You need to copy the whole font-awesome folder to your project css folder and not just the font-awesome.min.css file.

blocks|key|5264150|text|因此，直接在元素上添加style='font-weight:normal;'或更改字体似乎会覆盖font+Awesome文件中的.fas{font-weight:900}定义。我猜字体在它使用的字体文件中有特定的定义。似乎font-weight必须设置在501和1000之间，否则字体可能看起来像正方形块。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5264151|entityMap^0|B|R|1S|L|33|B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

So it seems adding <code>style='font-weight:normal;'</code> or otherwise changing the font directly on the element overrides the <code>.fas{font-weight:900}</code> definition in Font Awesome's CSS file. I guess the font has specific defines within the font file that it works with. It seems the <code>font-weight</code> must be set between 501 and 1000, or the font may look like a square block.

blocks|key|5264523|text|我的问题是拥有最多选票的那个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5264524|*{
font-family:+xxxxx
}|code-block|syntax|javascript|5264525|把它改成这个解决了这个问题|5264526|body{
font-family:+xxxx
}|5264527|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|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

my issue was the one having most of the votes

<pre><code>*{
font-family: xxxxx
}
</code></pre>

changing it to this solved the problem

<pre><code>body{
font-family: xxxx
}
</code></pre>

blocks|key|3847025|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3847026|<script+src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"+integrity="sha256-2JRzNxMJiS0aHOJjG%2BliqsEOuBb6%2B%2B9cY4dSOyiijX4="+crossorigin="anonymous"></script>|code-block|syntax|javascript|3847027|3847028|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
</div>
</div>

blocks|key|3846317|text|您可能已经使用VCS+(git或其他类似工具)将图标文件传输到服务器。git说：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3846318|warning:+CRLF+will+be+replaced+by+LF+in+webroot/fonts/FontAwesome.otf.
The+file+will+have+its+original+line+endings+in+your+working+directory.
warning:+CRLF+will+be+replaced+by+LF+in+webroot/fonts/fontawesome-webfont.eot.
The+file+will+have+its+original+line+endings+in+your+working+directory.
warning:+CRLF+will+be+replaced+by+LF+in+webroot/fonts/fontawesome-webfont.ttf.
The+file+will+have+its+original+line+endings+in+your+working+directory.
warning:+CRLF+will+be+replaced+by+LF+in+webroot/fonts/fontawesome-webfont.woff.
The+file+will+have+its+original+line+endings+in+your+working+directory.
warning:+CRLF+will+be+replaced+by+LF+in+webroot/fonts/fontawesome-webfont.woff2.
The+file+will+have+its+original+line+endings+in+your+working+directory.|code-block|syntax|javascript|3846319|你可能需要修正你的字体。|3846320|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|$]]

You may have used a VCS (git or somesuch) to transfer icon files to the server.
git says:

<pre><code>warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.
</code></pre>

You probably have to fix your fonts.

blocks|key|1737054|text|在Safari上，我在MacOS遇到了这个问题。这些字体令人惊叹的图片在Chrome上可以用，但在Safari上就不行了，所以我敢肯定不是因为这个网站。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1737055|我通过打开Safari菜单中的Preferences，并在Privacy选项卡下禁用/取消选中“阻止跨站点跟踪”来让它们渲染。|1737056|不知道为什么这个修复了它，但它确实修复了它。|1737057|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|$]]

On MacOS Mojave, I had this problem in Safari. The font-awesome images worked in Chrome but not in Safari, so I was sure it wasn't the site.

I got them to render by going to Preferences in the Safari menu, and disabling/unchecking "Prevent cross-site tracking" under the Privacy tab.

Not sure why this fixed it, but it did.

blocks|key|3846698|text|注意Bootstrap！Bootstrap将覆盖.fa类。如果你分别使用Bootstrap和Font-Awesome来处理响应块和图标，那么你需要解决Bootstrap中的.fa类，这样它们就不会影响Font-Awese型的独立实现。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3846699|例如:+Bootstrap中的字体系列'FontAwesome‘会干扰字体系列中的字体系列'Font+Awese5+Free’，你会得到一个白盒而不是你想要的图标。|3846700|可能有更干净的方法来处理这个问题，但是如果你已经按照检查清单尝试解决了“白盒”问题，但仍然不能解决它(就像我一样)，这可能是你正在寻找的答案。|3846701|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|$]]

Watch out for Bootstrap! Bootstrap will override .fa classes. If you're bringing in both packages separately thinking "I'll use Bootstrap for responsive block handling and Font-Awesome for icons", you need to address the .fa classes inside Bootstrap so they don't interfere with Font-Awesome's stand-alone implementation. 

eg: font-family 'FontAwesome' in Bootstrap will interfere with font-family 'Font Awesome 5 Free' in Font-Awesome and you will get a white box instead of the icon you want.

There may be cleaner ways of handling this, but if you've gone down the checklist trying to fix the "white box" issue and still can't figure it out (like I did), this may be the answer you're looking for.

blocks|key|1737154|text|基于5.10.1版本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1737155|我的解决方案(本地)：|1737156|1737157|如果您使用的是"fontawesome.css“或"fontawesome.min.css"，请尝试使用"all.css”(位于css文件夹中)。|ordered-list-item|1737158|下载的fontawesome包中的"css“文件夹和"webfonts”文件夹必须处于同一级别。|1737159|1737160|在我的例子中，我已经有了一个css文件夹，所以我只是将fontawesome文件夹重命名为"+css+-fa“。|1737161|用我的css文件夹中的"css-fa“和"webfonts”，只需在你的文本编辑器中正确链接它，它就可以工作了。|1737162|例如:+link+rel="stylesheet“href="css/css-fa/all.css”|1737163|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|G|7|W|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

Based on the 5.10.1 version.

My solution (locally):

<ol>
<li>If you're using "fontawesome.css" or "fontawesome.min.css", try using "all.css" instead (located in the css folder).</li>
<li>The "css" folder and the "webfonts" folder from the fontawesome package that you downloaded must be in the same level as each other.</li>
</ol>

In my case, I already had a css folder so I just renamed the fontawesome css folder to "css-fa".

With both "css-fa" and "webfonts" in my css folder, simply link it correctly in your text editor and it should work. 

Ex: link rel="stylesheet" href="css/css-fa/all.css"

blocks|key|1737195|text|解决了将目标字体系列选择器从*+{+...+}更改为*:not(i)+{+...+}的问题|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1737196|(使用scss预处理器)；希望您能解决|1737197|entityMap^0|E|9|Q|G|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

solved changing the targetted !importantized font-family selector from 
<code>* { ... }</code> 
to 
<code>*:not(i) { ... }</code> 

(with scss preprocessor); hope u solved

blocks|key|1737209|text|在我的例子中，这个问题是由于使用了一些没有包含在自由集合中的常规样式(far)而引起的。更改为fas修复了该问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1737210|entityMap^0|Z|3|1B|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

In my case, the problem was caused by using some regular styles (<code>far</code>) that are not included in the free set. Changing to <code>fas</code> fixed it.

blocks|key|5264372|text|下面的代码是font-awesome+4.70.0。要转到font-font+5.11.2，请单击+here。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5264373|<!DOCTYPE+html>

<html>

<head>

<link+rel="stylesheet"+
href="https://cdnjs.cloudflare.com/ajax/libs/font-+
awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i+class="fa+fa-camera-retro"+aria-hidden="true">

</html>|code-block|syntax|javascript|5264374|entityMap|0|LINK|mutability|MUTABLE|url|https://fontawesome.com/icons?from=io^0|1D|5|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

The code below is font-awesome 4.70.0. To go to font-awesome 5.11.2, click <a href="https://fontawesome.com/icons?from=io" rel="nofollow noreferrer"> here</a>.

<pre><code>&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css"&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;i class="fa fa-camera-retro" aria-hidden="true"&gt;&lt;/i&gt;

&lt;/html&gt;
</code></pre>

blocks|key|1737388|text|我按照这篇教程来主持Font+Awesome+5.13。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1737389|https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself|offset|length|1737390|由于某些原因，我无法让<link+href="%25PUBLIC_URL%25/font-awesome/all.min.css"+rel="stylesheet">加载webfonts，这反过来导致只显示方块。但是当我使用<script+defer+src="%25PUBLIC_URL%25/font-awesome/all.min.js"></script>的时候，一切都开始工作了。这两个链接都是在超文本标记语言<head>中添加的。|style|CODE|1737391|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|29|0|0|B|1W|29|8|30|1U|5M|6|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@$D|W|E|X|H|I]|$D|Y|E|Z|H|I]|$D|10|E|11|H|I]|$D|12|E|13|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]]]

I was following this tutorial to host Font Awesome Pro 5.13 myself.

<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>

For some reason I could not get <code>&lt;link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet"&gt;</code> to load <code>webfonts</code> that in turn resulted in only squares showing up. But when I used <code>&lt;script defer src="%PUBLIC_URL%/font-awesome/all.min.js"&gt;&lt;/script&gt;</code> everything started working. Both links were added in HTML <code>&lt;head&gt;</code>.

blocks|key|3846983|text|我试图通过scss将fa+5.0.13添加到Drupal8中。默认情况下，样式不包含在必须手动添加它们的主fa.scss中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3846984|@import+"libraries/fontawesome/fa-brands";
@import+"libraries/fontawesome/fa-light";
@import+"libraries/fontawesome/fa-regular";
@import+"libraries/fontawesome/fa-solid";|code-block|syntax|javascript|3846985|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 was trying to add fa 5.0.13 to drupal 8 with scss.
The styles are not included by default in the main fa.scss had to add them manually.
<pre><code>@import &quot;libraries/fontawesome/fa-brands&quot;;
@import &quot;libraries/fontawesome/fa-light&quot;;
@import &quot;libraries/fontawesome/fa-regular&quot;;
@import &quot;libraries/fontawesome/fa-solid&quot;;
</code></pre>

blocks|key|1737480|text|你需要把字体很棒的文件放在css文件夹中并更改|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1737481|href="../css/font-awesome.css“to+href="css/font-awesome.css”|1737482|还有一件事，你可以替换这个字体很棒的css文件，并尝试这个|1737483|​|1737484|.social-media{
++list-style-type:+none;
++padding:+0px;
++margin:+0px;
}

.social-media+li+.fa{+
++background:+#fff;
++color:+#262626;
++width:+50px;
++height:+50px;
++border-radius:+50%25;
++text-align:center;
++line-height:50px;+
}

.social-media+.fa:hover+{+
++box-shadow:+5px+5px+5px+#000;+
}

.social-media+.fa.fa-twitter:hover{
++background:#55acee;
++color:#fff;
+
}

.social-media+.fa.fa-facebook:hover{
++background:#3b5998;
++color:#fff;
}|code-block|syntax|javascript|1737485|<link+href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"+rel="stylesheet">

<ul+class="social-media">
++<li><i+class="fa+fa-twitter+fa-2x"></li>
++<li><i+class="fa+fa-facebook+fa-2x"></li>
+
</ul>|1737486|1737487|entityMap^0|0|0|0|0|0|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|@]|A|$]]|$1|H|3|I|5|J|7|V|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

you need to put font-awesome file in css folder and change
href=&quot;../css/font-awesome.css&quot;
to
href=&quot;css/font-awesome.css&quot;
One more thing You can Replace this Font-awesome css File And and try this one
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.social-media{
 list-style-type: none;
 padding: 0px;
 margin: 0px;
}

.social-media li .fa{ 
 background: #fff;
 color: #262626;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 text-align:center;
 line-height:50px; 
}

.social-media .fa:hover { 
 box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
 background:#55acee;
 color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
 background:#3b5998;
 color:#fff;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"&gt;

&lt;ul class="social-media"&gt;
 &lt;li&gt;&lt;i class="fa fa-twitter fa-2x"&gt;&lt;/i&gt;&lt;/li&gt;
 &lt;li&gt;&lt;i class="fa fa-facebook fa-2x"&gt;&lt;/i&gt;&lt;/li&gt;
 
&lt;/ul&gt;</code></pre>
</div>
</div>

blocks|key|3847182|text|在我的例子中，它的工作方式是添加字体系列，例如添加一个Instagram图标，我需要添加字体系列作为FontAwsome：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3847183|.fa-instagram:before+{
content:+"\f16d";
font-family:+"FontAwesome"+!important;|code-block|syntax|javascript|3847184|}|3847185|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|$]]

In my case, it worked by adding adding font-family, for example adding an Instagram icon, i needed to add font-family as FontAwsome:
<pre><code>.fa-instagram:before {
content: &quot;\f16d&quot;;
font-family: &quot;FontAwesome&quot; !important;
</code></pre>
}

blocks|key|3847192|text|尝试引用所有必要的文件，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3847193|​|3847194|<head>
++
++<link+href="/your-path-to-fontawesome/css/fontawesome.css"+rel="stylesheet">
++<link+href="/your-path-to-fontawesome/css/brands.css"+rel="stylesheet">
++<link+href="/your-path-to-fontawesome/css/solid.css"+rel="stylesheet">
++<style+type="text/css">
++++
++++i.fas,
++++i.fab+{
++++++border:+1px+solid+red;
++++}
++++$$
++++.fa-fish+{
++++++color:+salmon;
++++}

++++.fa-frog+{
++++++color:+green;
++++}

++++.fa-user-ninja.vanished+{
++++++opacity:+0.0;
++++}

++++.fa-facebook+{
++++++color:+rgb(59,+91,+152);
++++}
++</style>
</head>
<body>
++<i+class="fas+fa-fish">
++<i+class="fas+fa-frog">
++<i+class="fas+fa-user-ninja+vanished">
++<i+class="fab+fa-facebook">
</body>|code-block|syntax|javascript|3847195|3847196|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

Try referencing all the necessary files like so
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
 &lt;!-- reference your copy Font Awesome here (from our CDN or by hosting yourself) --&gt;
 &lt;link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"&gt;
 &lt;link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet"&gt;
 &lt;link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet"&gt;
 &lt;style type="text/css"&gt;
 &lt;!-- custom styling for all icons --&gt;
 i.fas,
 i.fab {
 border: 1px solid red;
 }
 &lt;!-- custom styling for specific icons --&gt;$$
 .fa-fish {
 color: salmon;
 }

 .fa-frog {
 color: green;
 }

 .fa-user-ninja.vanished {
 opacity: 0.0;
 }

 .fa-facebook {
 color: rgb(59, 91, 152);
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;i class="fas fa-fish"&gt;&lt;/i&gt;
 &lt;i class="fas fa-frog"&gt;&lt;/i&gt;
 &lt;i class="fas fa-user-ninja vanished"&gt;&lt;/i&gt;
 &lt;i class="fab fa-facebook"&gt;&lt;/i&gt;
&lt;/body&gt;</code></pre>
</div>
</div>

blocks|key|5264153|text|You+needed+to+close+your+`<link+/>`+
As+you+can+see+in+your+<head></head>+tag.+This+will+solve+your+problem

<head>
++++<link+rel="stylesheet"+href="../css/font-awesome.css"+/>
++++<link+rel="stylesheet"+href="../css/font-awesome.min.css"+/>
</head>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|5264154|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>You needed to close your `&lt;link /&gt;` 
As you can see in your &lt;head&gt;&lt;/head&gt; tag. This will solve your problem

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

I am using Font Awesome and do not wish to add CSS with HTTP. I downloaded Font Awesome and included it in my code, yet Font Awesome is showing a bordered square box instead of an icon. Here is my code: 

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" href="../css/font-awesome.css"&gt;
 &lt;link rel="stylesheet" href="../css/font-awesome.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div style="font-size: 44px;"&gt;
 &lt;i class="fa fa-camera-retro fa-lg"&gt;&lt;/i&gt; fa-lg
&lt;i class="fa fa-camera-retro fa-2x"&gt;&lt;/i&gt; fa-2x
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

I would like to know how to make the icon display instead of the bordered square box.

Font awesome is not showing icon

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我使用的字体很棒，不希望添加带有HTTP的CSS。我下载了Font Awesome并将其包含在我的代码中，但Font Awesome显示的是一个有边框的方框而不是图标。下面是我的代码：<html><head><link rel="stylesheet" href="../css/font-awesome.css"> <link rel="stylesheet" href="../css/fo

问Font icon不显示图标
EN

回答 33

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Font icon不显示图标EN

回答 33

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Font icon不显示图标
EN