FontAwesome 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中使用了它们，这样做是有效的，但我不想逐个导入每个图标。有没有办法像之前的版本一样使用它们？或者有没有不需要逐个导入的方法？

谢谢

- Valentine

Answer 1

安装

npm install --save @fortawesome/fontawesome-free

并在 .angular-cli 中使用

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

参考： 使用包管理器

- Diego Salguero

---

尝试使用'angular-fontawesome'后，我发现这种方法更容易升级fa.4到5，因为项目中的图标是css中的原始代码和伪元素的混合，这种方法使得现有的图标仍然可以向后兼容，除了一些别名图标。如果您的图标使用率较低，'angular-fontawesome'似乎变得非常繁琐。 - dale

为什么这是一个开发依赖项？ - Luc

你是对的，这不应该是开发依赖项。 - Diego Salguero

现在，您只需使用此方法即可将每个图标包含到您的项目中。 - Emobe

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

然而

您也可以导入整个图标样式。但是要小心！这种导入图标的方法不支持树摇，因此从导入包中所有的图标最终都会出现在捆绑包中。

另外，由于您正在使用 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>

所有代码都取自官方文档

- baao

Answer 3

我正在使用 Angular 8 版本。它完美地运行着。 请按照以下简单步骤操作：

1. 首先通过 Angular CLI 安装它

   npm install --save @fortawesome/fontawesome-free

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

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

3. 重新启动服务器

例如，如何添加

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

开心编程 :)

了解更多字体图标

- Anand Raja

---

这个支持摇树优化吗？ - kewur

请查看有关摇树优化的更多信息。 - Anand Raja

Answer 4

你需要在你的 index.html 文件中设置 CSS URL。

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

这是一个可用的示例：

Stackblitz 示例=> font-awesome

- Sanoj_V