Question

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

我尝试使用以下tutorial并没有成功。我尝试按照以下StackOverflow answer中概述的步骤进行操作，但这些步骤也不起作用。

Answer 1

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

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

brands

完成此操作后，导航至项目中的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

再次，根据您选择的图标，您需要将它们添加到之前导入的Font Awesome库中。将此添加到您最后一次导入的下方（..... imports: [...., FontAwesomeModule], .....上方）：

@NgModule()

然后导航到您要在library.add(fas, far, fab);中使用字体的页面模块，然后导入并添加home.module.ts：

FontAwesomeModule

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

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

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

您可以将<fa-icon [icon]="['fas', 'graduation-cap']" slot="end"></fa-icon>替换为正确的库，即fas，far和fas，然后替换图标的名称，在本例中为{{1 }}。

Answer 2

运行以下命令：

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

然后，在angular.json中将其附加在“样式”上：

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

Answer 3

以防万一有人处理FontAwesome PRO。我最近购买了FontAwesome专业图标，并像这样对它们进行了整合：

复制src / assets /
复制src / theme /中的FontAwesome scss文件夹
使用assets/webfonts !default;
添加到global.scss

@import'./theme/[YourDirectoryfontawesomeScss]/fontawesome.scss';
@import'./theme/[YourDirectoryfontawesomeScss]/solid.scss';
@import'./theme/[YourDirectoryfontawesomeScss]/brands.scss';
@import'./theme/[YourDirectoryfontawesomeScss]/light.scss';
@import'./theme/[YourDirectoryfontawesomeScss]/regular.scss';

最后，您可以将它们与i标记一起使用。例如

<i class="fas fa-stack-overflow"></i>

您可以在此处找到有关fa-class的更多详细信息 https://fontawesome.com/how-to-use/on-the-web/setup/getting-started

Answer 4

Angular用户最简单的方法是写ng add @ fortawesome / angular-fontawesome @ latest

Answer 5

我正在绞尽脑汁，试图使它与Ionic 5 / Angular 10一起工作，但无法使其正常工作。最后，如果有人需要它，我就会想到。

对于Ionic 5 / Angular 10

在项目文件夹中运行ng add @fortawesome/angular-fontawesome@latest，然后选择所需的图标。

在app.module.ts中添加以下内容：

import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons'; //Solid icons
import { far } from '@fortawesome/free-regular-svg-icons'; // Regular icons
import { fab } from '@fortawesome/free-brands-svg-icons'; // Brand icons

然后将FontAwesomeModule导入到声明的导入内容中，如下所示：

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, FontAwesomeModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})

然后将库构造函数导出为...

export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIconPacks(fas, far, fab);
  }
}

转到您要使用“真棒字体”的模块（例如mypage.module.ts）并导入FontAwesomeModule。

最后在您的HTML中，例如mypage.page.html只需使用<fa-icon icon="home"></fa-icon>来显示图标。

如果遇到任何问题，请确保先停止Ionic并再次运行ionic serve，因为这将重新编译框架。

还请查看https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/features.md，以获取其用法中可用功能的完整列表。

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

5 个答案: