blocks|key|1350541|text|编辑:图标不显示的原因是您没有指定图标样式的类型。您可以找到一个受支持的图标样式列表这里+(或列在下面)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1350542|brands.scss|unordered-list-item|style|CODE|1350543|solid.scss|1350544|regular.scss|1350545|light.scss|1350546|原始答案|1350547|FontAwesome在其NPM包中包含的SCSS文件没有为您设置好自己:您应该自己导入各个SCSS文件。(更多信息请参见SCSS部分的文档+)|1350548|相反，您应该包含已经编译的CSS，这样您就不必手动导入SCSS文件。(运行下面的命令来设置样式)|1350549|ng+config+projects.myproject.architect.build.options.styles+"./node_modules/@fortawesome/fontawesome-free/css/all.css"|code-block|syntax|javascript|1350550|(或者手动将"./node_modules/@fortawesome/fontawesome-free/css/all.css"添加到项目样式中)|1350551|有关FontAwesome包中包含的内容的更多信息，请参阅文档。|1350552|entityMap|0|LINK|mutability|MUTABLE|url|https://fontawesome.com/how-to-use/on-the-web/using-with/sass|1|2|https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers^0|16|2|0|0|0|B|0|0|A|0|0|C|0|0|A|0|0|1P|9|1|0|0|0|6|1M|0|T|2|2|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|D|3|E|5|F|7|1I|8|@$A|1J|B|1K|G|H]]|9|@]|C|$]]|$1|I|3|J|5|F|7|1L|8|@$A|1M|B|1N|G|H]]|9|@]|C|$]]|$1|K|3|L|5|F|7|1O|8|@$A|1P|B|1Q|G|H]]|9|@]|C|$]]|$1|M|3|N|5|F|7|1R|8|@$A|1S|B|1T|G|H]]|9|@]|C|$]]|$1|O|3|P|5|6|7|1U|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1V|8|@]|9|@$A|1W|B|1X|1|1Y]]|C|$]]|$1|S|3|T|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|U|3|V|5|W|7|20|8|@]|9|@]|C|$X|Y]]|$1|Z|3|10|5|6|7|21|8|@$A|22|B|23|G|H]]|9|@]|C|$]]|$1|11|3|12|5|6|7|24|8|@]|9|@$A|25|B|26|1|27]]|C|$]]|$1|13|3|-4|5|6|7|28|8|@]|9|@]|C|$]]]|14|$15|$5|16|17|18|C|$19|1A]]|1B|$5|16|17|18|C|$19|1A]]|1C|$5|16|17|18|C|$19|1D]]]]

EDIT: The reason why the icons don't display is that you didn't specify the type of icon style. You can find a list of supported icon styles <a href="https://fontawesome.com/how-to-use/on-the-web/using-with/sass" rel="nofollow noreferrer">here</a> (or listed below):

<ul>
<li><code>brands.scss</code></li>
<li><code>solid.scss</code></li>
<li><code>regular.scss</code></li>
<li><code>light.scss</code></li>
</ul>

<hr>

<h1>Original answer</h1>

The SCSS file that FontAwesome includes in its NPM package does not set itself up for you: you're supposed to import the individual SCSS files yourself. (See the <a href="https://fontawesome.com/how-to-use/on-the-web/using-with/sass" rel="nofollow noreferrer">docs on the SCSS part</a> for more info)

Instead, you should include the already compiled CSS so that you don't have to import the SCSS files manually. (Run the command below to set the style)

<pre><code>ng config projects.myproject.architect.build.options.styles "./node_modules/@fortawesome/fontawesome-free/css/all.css"
</code></pre>

(Or manually add <code>"./node_modules/@fortawesome/fontawesome-free/css/all.css"</code> to your project's styles)

For more info on what FontAwesome includes in its package, refer to the <a href="https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers" rel="nofollow noreferrer">docs</a>.

blocks|key|1350612|text|字体现在提供了字体角元件，但是您也可以使用以下简单的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1350613|npm+install+--save+@fortawesome/fontawesome-free|code-block|syntax|javascript|1350614|只需简单地将以下内容添加到styles.scss中，就可以加载字体漂亮的图标|style|CODE|1350615|$fa-font-path:+'~@fortawesome/fontawesome-free/webfonts';
@import+"~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import+"~@fortawesome/fontawesome-free/scss/solid.scss";
@import+"~@fortawesome/fontawesome-free/scss/brands.scss";|1350616|在角v8.2.14和角CLI+v8.3.19上测试。|1350617|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/FortAwesome/angular-fontawesome^0|7|5|0|0|0|D|B|0|0|2|7|F|7|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@$A|14|B|15|K|L]]|9|@]|C|$]]|$1|M|3|N|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|O|3|P|5|6|7|17|8|@$A|18|B|19|K|L]|$A|1A|B|1B|K|L]]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

Font Awesome now provides <a href="https://github.com/FortAwesome/angular-fontawesome" rel="noreferrer">Font Awesome Angular component</a>, but you can also use the following plain approach:

<pre><code>npm install --save @fortawesome/fontawesome-free
</code></pre>

Load Font Awesome icons by just simply adding the following into <code>styles.scss</code>:

<pre><code>$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
</code></pre>

Tested on Angular <code>v8.2.14</code> and Angular CLI <code>v8.3.19</code>.

I want to add fontawesome 5 to my angular-cli 8.0.2 project (with scss) by copy fonts to project (not link them from internet) and without using any external plugins/projects but in direct way. 

So I create project and install fontawesome (free) <a href="https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#installing-free" rel="nofollow noreferrer">via npm</a> as follows

<pre><code>ng n --style=scss --routing=true myproject
cd myproject
npm install --save-dev @fortawesome/fontawesome-free
</code></pre>

I modify files:

<ul>
<li>In <code>angular.json</code> in key <code>projects.myproject.architect.build.options.styles</code> I add following value to array 

<code>"./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"</code></li>
<li>In <code>styles.scss</code> I add line:

<code>@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";</code></li>
<li>In <code>src/app/app.component.html</code> after <code>Wellcome</code> text I add 

<code>&lt;i class="fas fa-sync-alt"&gt;&lt;/i&gt;</code></li>
</ul>

Then I run command <code>ng serve</code> and go in browser to <code>http://localhost:4200/</code> and see this:

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

I use different instructions from internet but this is best result that I get - but still doesn't work (we see square instead <a href="https://fontawesome.com/icons/sync-alt?style=solid" rel="nofollow noreferrer">this icon</a>). What to do to fix this problem?

set up font awesome 5 in angular-cli 8 for angular 7

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我想添加方阵5到我的角-cli 8.0.2项目(与scss)通过复制字体到项目(不是从互联网链接他们)，不使用任何外部插件/项目，但以直接的方式。因此，我创建了项目并安装了fontawesome (免费) ，如下所示ng n --style=scss --routing=true myprojectcd myproje...

问在角-cli 8中为角7设置字体超赞5。
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在角-cli 8中为角7设置字体超赞5。EN