angular - Angular 6中的FontAwesome图标？

Question

我正在尝试在 Angular 项目中使用来自 FontAwesome 的图标。
我从“入门”指南开始，您可以在此处找到:FontAwesome Angular Getting Started

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

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

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

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

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

然后是我组件中的icon字段赋值:

faCheck = faCheck;

请注意，我基本上只更改了我测试过的示例中的图标名称，这些示例正在我上面发布的 Url 上工作。即使我在声明中查看“faCheck”的定义，我也看到它已定义，所以我希望它可用。

Chrome 控制台在加载页面时显示此错误:

FontAwesome: Could not find icon. It looks like you've provided a null or undefined icon object to this component.

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

更新:在重建我的整个应用程序时它开始工作了。我当时使用的是 VS Code，所以当你保存文件时，他会尝试重新创建最终的包，让你导航和检查你的开发。我不知道组件的内存状态到底发生了什么。我认为该图标未显示是因为引用文献未对齐。

Answer 1

你所要做的就是:

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 中添加任何内容，也无需使用 yarn 或 npm 安装任何内容。

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

检查您是否按照教程中的说明安装了所有依赖项。