你如何将 Font Awesome 添加到 Ionic 4

Question

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

我尝试使用以下tutorial，但没有取得多大成功。我尝试按照以下StackOverflow answer 中概述的步骤进行操作，但也没有用。

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

然后导航到要使用字体的页面模块，即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"
}

Answer 3

以防万一有人使用 FontAwesome PRO。我最近购买了 FontAwesome pro 图标并像这样集成它们：

• 复制 src/assets/ 中的 FontAwesome webfonts 文件夹
• 复制 src/theme/ 中的 FontAwesome scss 文件夹

• 将 _variables.scss 中的 $fa-font-path 更改为 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- 类的更多详细信息 https://fontawesome.com/how-to-use/on-the-web/setup/getting-started

Answer 4

我绞尽脑汁试图让它与 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);
  }
}

转到您希望使用 Font Awesome 的模块（例如 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，了解其使用中可用功能的完整列表。

Answer 5

对于 Angular 用户来说，最简单的方法是编写 ng add @fortawesome/angular-fontawesome@latest