Angular 6中的FontAwesome图标？

Question

我正在尝试在Angular项目中使用FontAwesome中的图标。
我从“入门指南”开始，您可以在这里找到：FontAwesome Angular入门

一切正常，无论我在模板中的任何位置都可以看到faCoffee图标。但是，如果我尝试将其更改为另一个图标（例如“检查”图标），则不会显示任何内容。

我在组件级别更改了图标声明，使其看起来像这样：

import { faCheck } from '@fortawesome/free-solid-svg-icons';

更改了html模板以显示我的新图标：

<fa-icon [icon]="faCheck"></fa-icon>

然后在我的组件中分配图标字段：

faCheck = faCheck;

请注意，在我上面测试过的示例中，我实际上仅更改了图标的名称，这些示例在上面发布的网址中起作用。即使我在声明中使用“ faCheck”的定义，我也会看到它已定义，因此我希望它可以使用。

页面加载时，Chrome控制台显示此错误：

FontAwesome：找不到图标。您似乎已为此组件提供了一个null或未定义的图标对象。

第一次尝试在我的项目中使用FontAwesome，欢迎提供有用的常规信息。

更新：可以正常重建我的整个应用程序了。我使用的是VS Code，因此当您保存文件时，他尝试重新创建最终的包以使您能够浏览和检查开发。我不知道组件在内存状态下到底会发生什么。我认为该图标未显示，因为引用存在一些偏差。

Answer 1

1-安装这个 npm install @fortawesome/fontawesome-free

2- 将此添加到angular.json( angular-cli.json)

"styles": [
    "...",
    "./node_modules/@fortawesome/fontawesome-free/css/all.min.css"
]

3- 现在您可以使用带<i>标签的字体

Answer 2

您要做的就是：

1-将其添加到index.html：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

2-将您的图标用作：

<i class="fas fa-check"></i>

您不必在纱线中添加任何东西，component.ts也不必在app.module.ts纱线中添加任何东西，也无需使用npm安装任何东西。

编辑： 要回答您的问题，这是一个使用本教程中提到的faCheck的stackblitz，它对我有用：https ://stackblitz.com/edit/angular-4ebr9t

检查是否按照教程中所述安装了所有依赖项。

Answer 3

我在这个 angular6 项目中使用了 Fontawesome，请查看 package.json，也许它有助于解决您的问题：https : //github.com/hamilton-lima/portfolio-web/blob/master/package.json

这是我安装的

    "@fortawesome/angular-fontawesome": "^0.1.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.0",
    "@fortawesome/free-brands-svg-icons": "^5.1.0",
    "@fortawesome/free-regular-svg-icons": "^5.1.0",
    "@fortawesome/free-solid-svg-icons": "^5.1.0",
    "angular-font-awesome": "^3.1.2",

确保将必要的图标导入到您正在使用的库中

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fas, far, fab);

请参阅此处的示例：https : //github.com/hamilton-lima/portfolio-web/blob/master/src/app/shared/shared.module.ts