0

我正在尝试在我的 Angular 10 应用程序中使用 Font Awesome Brand Icon。我已经安装了 fontawesome 并尝试使用以下方法导入它：

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

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

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

但是，我的组件现在卡在加载中，我该如何解决这个问题？已经看到了这个问题：我如何在 Angular 中使用品牌 fontawesome 图标

4

1 回答 1

5

首先，运行以下命令：

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

您应该根据您的 Angular 版本更改最后一个命令中的版本号。请参阅文档。

Font Awesome 图标被分成不同的样式，这些样式以单独的包运送，以满足不同的需求并减小单个包的大小。要使用图标，您需要安装包含它的软件包。

在您的情况下，您正在尝试使用包icon内可用的一个Brands Style。不和谐图标

在此处输入图像描述

所以运行以下命令： See Here。

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

现在导入FontAwesomeModuleAppModule：

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

于 2020-08-22T16:31:59.833 回答