javascript - 在 angular-cli 8 中为 angular 7 设置字体 awesome 5

Question

我想将 fontawesome 5 添加到我的 angular-cli 8.0.2 项目(使用 scss)，方法是将字体复制到项目(而不是从互联网链接它们)并且不使用任何外部插件/项目，而是直接使用。

所以我创建项目并安装 fontawesome(免费)via npm如下

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

我修改文件:

• 在 angular.json在关键projects.myproject.architect.build.options.styles我将以下值添加到数组

  "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"

• 在 styles.scss我添加行:

  @import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";

• 在 src/app/app.component.html在 Wellcome 之后我添加的文字

  <i class="fas fa-sync-alt"></i>

然后我运行命令 ng serve然后在浏览器中转到 http://localhost:4200/看看这个:

我使用来自互联网的不同说明，但这是我得到的最好结果 - 但仍然不起作用(我们看到的是正方形 this icon )。 如何解决此问题？

Answer 1

Font Awesome 现在提供 Font Awesome Angular component , 但您也可以使用以下简单方法:

npm install --save @fortawesome/fontawesome-free

只需将以下内容添加到 styles.scss 即可加载 Font Awesome 图标:

$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";

在 Angular v8.2.14 和 Angular CLI v8.3.19 上测试。