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>

然后是我的组件中的图标字段赋值：

faCheck = faCheck;

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

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

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

第一次尝试在我的项目中使用 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 安装任何内容。

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

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

Answer 2

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 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