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

问题描述

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

There are a lot of tutorials and articles of how to include Font Awesome in an Ionic 3 project but I struggled finding any on how to add Font Awesome into an Ionic 4 project. So this poses the question, how do you add and use Font Awesome in an Ionic 4 project?

我尝试使用以下教程没有太大的成功.我尝试按照以下 StackOverflow答案也不起作用.

I have tried using the following tutorial without much success. I tried following the steps outlined in the following StackOverflow answer which did not work either.

推荐答案

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

To get Font Awesome working in an Ionic 4 project you can follow the steps below.

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

Firstly, you need to install all the npm packages, the first two are required but you can decide whether you need the solid, regular or brands icons, I will be using all of them. Go ahead and execute the following npm commands in your terminal:

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并添加以下内容:

Once you have done that, navigate to your app.module.ts in your project and add the following:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';

根据安装的字体包，添加以下内容:

Depending on which font packages you installed, add the following:

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:

Once they have been imported at the top of your file you will need to include the FontAwesomeModule in your imports:

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

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

Once again, depending on what icons you chose you will need to add them to the Font Awesome library that was imported earlier. Add this underneath your last import (above @NgModule()):

library.add(fas, far, fab);

然后导航至要在其中使用字体的页面模块，例如home.module.ts，然后导入并添加FontAwesomeModule:

Then navigate to the module of the page that you would like to use the fonts in i.e. home.module.ts and then import and add the FontAwesomeModule:

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

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

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

Then finally you can use the icon in that page's HTML by inserting the following where you'd like the icon:

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

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

You can replace, fas with the correct library i.e. far, fas & fab and then the name of the icon, which in this case was graduation-cap.

这篇关于如何将“真棒字体"添加到Ionic 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！