Angular 6中的FontAwesome图标？

Question

Angular 6中的FontAwesome图标？

13

我想在Angular项目中使用FontAwesome的图标。我从这里找到的“入门指南”开始：FontAwesome Angular 入门指南。

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

我在组件级别更改了我的图标声明，使其如下所示：

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

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

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

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

faCheck = faCheck;

请注意，我基本上只更改了图标的名称，这些示例在我上面发布的网址中经过测试并且可用。即使我查看我的声明中“faCheck”的定义，我也可以看到它被定义了，因此我期望它是可用的。

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

FontAwesome：找不到图标。看起来您已向该组件提供了空或未定义的图标对象。

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

更新：通过重建整个应用程序使其工作。我正在使用VS Code，因此当您保存文件时，它会尝试重新创建最终包以让您导航和检查开发情况。我不知道组件在内存状态方面到底发生了什么。我认为图标之所以没有显示出来，是因为引用存在某些错位。

- mororo

谢谢您的更新，这也解决了我的问题。我正在使用HMR，必须清理我的/dist并再次运行ng build。 - Aaron Jordan

3个回答

8

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

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

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

3- 现在你可以用带有<i>标签的字体了。

- ahmet aslan

6

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

- hamilton.lima

已更新详细信息，可能是根本原因。 - hamilton.lima

我也不理解 :) - hamilton.lima

1

请记住，导入整个图标子集会使您的应用程序变得臃肿。请仅导入您将要使用的特定图标。https://github.com/FortAwesome/angular-fontawesome#using-the-icon-library - Aaron Jordan

树摇技术不应该能够删除未使用的图标吗？ - hamilton.lima

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Observablerxjs · Accepted Answer

你所需做的是：

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的stackblitz，如教程中所述使用它，它对我有用：https://stackblitz.com/edit/angular-4ebr9t

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