如何将 Font Awesome 添加到 Ionic 4

有很多关于如何将 Font Awesome 添加到 Ionic 3 项目中的教程和文章，但我很难找到有关如何将 Font Awesome 添加到 Ionic 4 项目中的教程和文章。那么这就提出了一个问题，如何在 Ionic 4 项目中添加和使用 Font Awesome？

我尝试过使用以下内容tutorial https://charlouze.github.io/ionic/2017/05/31/Ionic-3-and-Font-Awesome.html没有取得多大成功。我尝试按照下面列出的步骤进行操作堆栈溢出答案 https://stackoverflow.com/questions/53259513/how-do-i-add-font-awsome-to-ionic-4-project这也不起作用。

要让 Font Awesome 在 Ionic 4 项目中工作，您可以按照以下步骤操作。

首先，您需要安装所有 npm 软件包，前两个是必需的，但您可以决定是否需要solid, regular or brands图标，我将使用所有它们。继续并在终端中执行以下 npm 命令：

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/angular-fontawesome
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

完成后，导航到您的app.module.ts在您的项目中并添加以下内容：

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

将它们导入到文件顶部后，您将需要包含FontAwesomeModule在您的进口中：

.....
imports: [...., FontAwesomeModule],
.....

再次，根据您选择的图标，您需要将它们添加到之前导入的 Font Awesome 库中。将其添加到您上次导入的下方（上方@NgModule()):

library.add(fas, far, fab);

然后导航到您想要使用字体的页面模块，即home.module.ts然后导入并添加FontAwesomeModule:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
....

@NgModule({
    imports: [
        ...
        FontAwesomeModule
        ...
    ],
})

最后，您可以在该页面的 HTML 中使用该图标，方法是在您想要图标的位置插入以下内容：

<fa-icon [icon]="['fas', 'graduation-cap']" slot="end"></fa-icon>

您可以更换，fas使用正确的库，即far, fas & fab然后是图标的名称，在本例中是graduation-cap.