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;

请注意，在我上面测试并运行于上面发布的网址的示例中，我基本上仅更改图标的名称。即使我在声明中使用“ faCheck”的定义，我也会看到它已定义，因此我希望它可以使用。

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

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

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

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

Answer 1

我在这个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

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中添加任何内容，也不必安装带有yarn或npm的内容。

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

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

Answer 3

1-安装此array

2-将此添加到angular.json（angular-cli.json）

npm install @fortawesome/fontawesome-free

3-现在您可以使用带有"styles": [ "...", "./node_modules/@fortawesome/fontawesome-free/css/all.min.css" ]标签的字体

Angular 6中的FontAwesome图标吗？

3 个答案: