如何在角度组件中使用超棒的字体品牌图标？

如何解决如何在角度组件中使用超棒的字体品牌图标？

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

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

在我的组件中。 然后，我将faDiscord分配给了一个属性，并试图在我的html中像这样使用它：

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

但是，我的组件现在被卡住了，我该如何解决？已经看到以下问题：How do i use brand fontawesome icon in angular

解决方法

首先，运行以下命令：

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图标分为多种样式，并以 单独的包装以满足不同的需求并减少个体 包装尺寸。要使用图标，您需要安装一个软件包 包含它。

在您的情况下，您尝试使用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