blocks|key|4031689|text|您应该使用类fa而不是fas。fa类设置字体面板。(帽子顶端写着“迈克希尔”)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4031690|​|4031691|http://fontawesome.io/icon/address-card/上的视图源|offset|length|4031692|entityMap|0|LINK|mutability|MUTABLE|url|http://fontawesome.io/icon/address-card/^0|0|0|0|14|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

You should be using the class fa instead of fas. The fa class sets the font-face. (hat tip to @mike-hill)



View source on 
<a href="http://fontawesome.io/icon/address-card/" rel="noreferrer">http://fontawesome.io/icon/address-card/</a>

blocks|key|3360953|text|字体-可怕的版本5%2B|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3360954|fa前缀已从版本5中删除。为了使用前缀，安装版本5%2B并将其包含在您的样式中。|offset|length|style|BOLD|3360955|安装：|3360956|yourapp$npm+install+@fortawesome/fontawesome免费--保存|3360957|package.json|3360958|"styles":+[
+++"node_modules/@fortawesome/fontawesome-free/css/all.css",
+++"src/styles.scss"
++],|code-block|syntax|javascript|3360959|entityMap^0|0|0|4|H|2|0|0|3|0|0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]|$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|14|8|@$D|15|E|16|F|G]]|9|@]|A|$]]|$1|N|3|O|5|P|7|17|8|@]|9|@]|A|$Q|R]]|$1|S|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|T|$]]

<h1>Font-awesome version 5+</h1>
fa prefix has been depricated from version 5. In order to use fas prefix install version 5+ and include in your styles.
install:
yourapp$npm install @fortawesome/fontawesome-free --save
package.json
<pre><code>&quot;styles&quot;: [
 &quot;node_modules/@fortawesome/fontawesome-free/css/all.css&quot;,
 &quot;src/styles.scss&quot;
 ],
</code></pre>

blocks|key|4031698|text|在将依赖项添加到Angular.json或角-cli.json之后。1)停止运行App2)启动它--它将识别新的资源|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4031699|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|$]]

After adding dependencies to Angular.json or Angular-cli.json.
1) stop running App
2) start it
It will recognize new resources

blocks|key|4031732|text|首先，确保您已经正确地设置了项目要求，通过将它们包括在styles[]中的angular.jason中，或者像这样简单地导入它们，从而使用字体强大的图标：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4031733|@import+"~font-awesome/css/font-awesome.css";|code-block|syntax|javascript|4031734|在组件css文件中。然后，除了字体图标标记给您的内容之外，还需要有"fa“类。或者，你也可以这样做：|4031735|<div+class="fa">
<i+class="whateverTheIconClassYouWant">
</div>|4031736|在带有class="fa“的div中，您可以直接复制粘贴字体awsome网站中提供的代码。|4031737|希望这能有所帮助！编码愉快！|4031738|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|$]]

First make sure you have properly setup the project requirements to use font-awesome icons by including them in styles[] in angular.jason or simply importing them by like this:

<pre><code>@import "~font-awesome/css/font-awesome.css";
</code></pre>

in the component css file. Then it is necessary to have "fa" class in addition to what the font-icons markup gives you. Alternatively you can do like this:

<pre><code>&lt;div class="fa"&gt;
&lt;i class="whateverTheIconClassYouWant"&gt;&lt;/i&gt;
&lt;/div&gt;
</code></pre>

Inside the div with class="fa" you can directly copy paste the code that is provided in font awsome website.

Hope this helps!
Happy coding!!!!

blocks|key|1325282|text|安装字体后，您可以将其添加到index.html中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1325283|​|1325284|<link+rel="stylesheet"+href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"+integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="+crossorigin="anonymous"+referrerpolicy="no-referrer"+/>|code-block|syntax|javascript|1325285|1325286|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|$]]

after installing font awesome, you can add this to index.html
<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;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /&gt;</code></pre>
</div>
</div>

I'm working on an angular 4 project using font-awesome, i followed this guide to install the library with npm:
<a href="https://stackoverflow.com/questions/38796541/how-to-add-font-awesome-to-angular-2-cli-project">How to add font-awesome to Angular 2 + CLI project</a>

i've configured the project to compile the scss stylesheets with the ng-serve command, my styles paths of the angular-cli.json looks like this:

<pre><code>"styles": [
 "../node_modules/bootstrap/scss/bootstrap.scss",
 "../node_modules/bootstrap/scss/main.scss",
 "../node_modules/font-awesome/scss/font-awesome.scss"

 ],
</code></pre>

i want to make a button with an address card icon on it, i'm also working with Bootstrap 4, so it looks like this:

<pre><code>&lt;button class="btn btn-sm btn-primary"&gt;&lt;span class="fas fa-address-card"&gt;&lt;/span&gt;&lt;/button&gt;
</code></pre>

but when it loads, it looks like this:
<a href="https://i.stack.imgur.com/e5DkZ.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/e5DkZ.jpg" alt=""></a>

Font-awesome icons not loading on Angular4 project

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我正在开发一个使用字体-令人敬畏的角4项目，我按照本指南安装了npm：库。我已经将该项目配置为使用ng-serve命令编译scss样式表，我的角-cli.json样式路径如下所示："styles": [        "../node_modules/bootstrap/scss/bootstrap.scss",        "../node_modules/bootstrap/scss/mai

问字体-令人敬畏的图标没有加载在Angular4项目上
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字体-令人敬畏的图标没有加载在Angular4项目上EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字体-令人敬畏的图标没有加载在Angular4项目上
EN