如何将“真棒字体”添加到Ionic 4

Question

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

我尝试使用以下教程没有成功。我尝试按照以下StackOverflow答案中概述的步骤进行操作，该步骤也不起作用。

Answer 1

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

首先，您需要安装所有npm软件包，前两个是必需的，但是您可以决定是否需要solid，regular或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);

然后导航到您要在ie中使用字体的页面模块，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。

Answer 2

运行以下命令：

npm install --save-dev @fortawesome/fontawesome-free

然后，在angular.json“样式”上附加这个：

{
    "input": "node_modules/@fortawesome/fontawesome-free/css/all.css"
}