如何在 angular 组件中使用超赞字体品牌图标？

Question

我正在尝试在我的 Angular 10 应用程序中使用 Font Awesome 品牌图标。我已经安装了 fontawesome 并尝试使用以下方式导入它：

import { faDiscord } from '@fortawesome/fontawesome-free-brands';

在我的组件中。然后我将 faDiscord 分配给属性并尝试在我的 html:

中像这样使用它

<fa-icon [icon]="faDiscord"></fa-icon>

但是，我的组件现在卡在加载中，我该如何解决这个问题？已经看到这个问题：

Answer 1

首先，运行以下命令：

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome@0.7.0

您应该根据您的 Angular 版本更改最后一条命令中的版本号。 See the docs.

Font Awesome icons are separated into styles, which are shipped in separate packages to meet different needs and to reduce individual packages size. To use an icon you'll need to install a package which contains it.

在你的例子中，你正在尝试使用 icon，它在 Brands Style 包中可用。 Discord Icon

所以运行下面的命令： See Here.

npm install @fortawesome/free-brands-svg-icons

现在在 AppModule 中导入 FontAwesomeModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

在您的组件 blabla.components.ts 中，创建一个新变量并将 faDiscord 分配给它：

import { Component } from '@angular/core';
import { faDiscord } from '@fortawesome/fontawesome-free-brands';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  faDiscord  = faDiscord;
}

现在在你的 app.component.html:

<fa-icon [icon]="faDiscord"></fa-icon>

这是一个Stackblitz

如何在 angular 组件中使用超赞字体品牌图标？

How can I use a font awesome brand icon in an angular component?

angular

font-awesome

font-awesome-5

angular-fontawesome