如何将 Font Awesome 添加到 Ionic 4

Question

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

我试过使用以下 tutorial without much success. I tried following the steps outlined in the following 也没有用。

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

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

复制 src/assets/
复制 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 3

运行以下命令：

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

然后，在 angular.json 中将此附加到 "styles"：

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

Answer 4

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

Answer 5

我绞尽脑汁试图让它与 Ionic 5/Angular 10 一起工作，但无法让它工作。我最后想通了，如果其他人需要它。

对于离子 5/Angular10

运行 ng add @fortawesome/angular-fontawesome@latest 在您的项目文件夹和 select 您需要的图标。

在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 导入到 imports 声明中，因此它看起来像这样：

@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 以获取其使用中可用功能的完整列表。

如何将 Font Awesome 添加到 Ionic 4

How do you add Font Awesome to Ionic 4

font-awesome

ionic-framework

ionic4