如何解决如何在角度组件中使用超棒的字体品牌图标?
我正在尝试在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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。