Font Awesome 5 和 Angular 5

Question

我使用的是 font-awesome npm 包（它是 Font Awesome 4.7 版本），但我想升级到 Font Awesome 5。我已经安装了以下包：

"@fortawesome/angular-fontawesome": "^0.1.1",
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free-brands": "^5.0.13",
"@fortawesome/fontawesome-free-regular": "^5.0.13",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.0",
"@fortawesome/free-solid-svg-icons": "^5.1.0",

我使用的是这样的图标：

<i class="fa fa-plus"></i>

在新版本中，我尝试使用这样的图标：

<i class="fas fa-sign-out-alt fa-2x"></i>

但这不起作用。我尝试添加这样的图标：

import {faSignOutAlt} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
fontawesome.library.add(faSignOutAlt);

在我的 app.module.ts 中，它正在工作，但我不想一个一个地导入每个图标。有没有办法像我在以前的版本中那样使用它们？有办法不一个个导入吗？

谢谢

Answer 1

安装

npm install --save @fortawesome/fontawesome-free

并在 .angular-cli 中使用

 "styles": [
    "styles.css",
    "../node_modules/@fortawesome/fontawesome-free/css/all.css",

参考： Using a Package Manager

Answer 2

是的，您可以全部导入并添加它们

import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

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

However

您还可以导入整个图标样式。不过要小心！这种导入图标的方式不支持 tree-shaking，所以导入包中的所有图标都会在 bundle 中结束。

另外，既然您使用的是angular-fontawesome，请使用它：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FontAwesomeModule],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    // Add an icon to the library for convenient access in other components
    library.addIcons(faCoffee);
  }
}

在html中

<!-- simple name only that assumes the default prefix -->
<fa-icon icon="coffee"></fa-icon>
<!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>

All code taken from the official documentation

Answer 3

我在 Angular 8 版本中使用它。它运行良好。 请遵循这个简单的程序：

1. 先通过angular cli安装

   npm install --save @fortawesome/fontawesome-free

2. 打开 angular.json 并按如下方式更新 css 文件

   “样式”：[ “样式.css”， "node_modules/@fortawesome/fontawesome-free/css/all.css"]

3. 重启服务器

例如，如何添加

<i class="fas fa-paper-plane"></i>

编码愉快:)

For more font awesome icons

Answer 4

您需要在 index.html 中设置 css url

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

这是工作示例：

Stackblitz example=> font-awesome