Question

我在尝试使用字体惊人的图标时遇到问题。我已经使用命令行将FontAwesome安装到了我的项目中：

alter table ingredients add constraint chk_ingredients_stock_gt_0
    check (stock >= 0);

我有一个子模块，我想在其内部使用“ fas”->“ images”图标。因此，我创建了我的子模块：

ng add @fortawesome/angular-fontawesome@latest

此子模块中有一个组件（photo-list.component.ts和photo-list.component.html）。在其HTML文件中，我只是将以下行显示为标题中的图标：

import { PhotoListComponent } from './photo-list.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';

@NgModule({
  declarations: [
    PhotoListComponent
  ],
  imports: [
    CommonModule,
    FontAwesomeModule
  ]
})
export class PhotoListModule {
  constructor() {
    library.add(fas);
  }
}

当我运行我的角度项目并打开此模块时，会发生以下错误（并且图标会显示注释）：错误NG8001：“ fa-icon”不是已知元素

为什么不起作用？

Answer 1

我已经检查了代码：fontawesome中进行了一些更改，现在必须进行正确的导入：

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

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import { FontAwesomeModule, FaIconLibrary  } from '@fortawesome/angular-fontawesome';

import { faCoffee, fas } from '@fortawesome/free-solid-svg-icons';

@NgModule({
  imports:      [ BrowserModule, FormsModule, FontAwesomeModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { 
  constructor(library: FaIconLibrary) {
    library.addIconPacks(fas);
    library.addIcons(faCoffee);
  }
}

根据您的代码，查看工作示例：https://stackblitz.com/edit/angular-5qu1fy

Answer 2

我知道这是一个老问题，但是如果有人使用Angular Material，我想添加一些信息。根据他们的文档https://github.com/FortAwesome/angular-fontawesome。只需将fontawesome导入您的material模块中，然后在任何组件中使用它并在html中绑定属性，例如；

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
    
@NgModule({
  imports: [FontAwesomeModule]
})
export class MaterialModule {}

//any component
import { faGoogle } from '@fortawesome/free-brands-svg-icons';

googleIcon = faGoogle;

//html
<fa-icon [icon]="googleIcon"></fa-icon>

Angular 9 + FontAwesome 0.6：“错误NG8001：“ fa-icon”不是已知元素”

2 个答案: