1

在我的 Angular 11 演示应用程序中，我设置了一个单独的模块，在其中连接 FontAwesome，以免弄乱我的 AppModule。然后将该模块导入 AppModule。（过去将此方法与 Angular Material 一起使用并且效果很好。）

我看到的问题是我可以使用简单的语法：

 <fa-icon icon="star"></fa-icon>

并且图标的“实体”版本在我的组件中正确显示，但是当我使用括号语法时，绑定到图标指令以显示图标的替代版本......

<fa-icon class="filled" [icon]="['far', 'star']"></fa-icon>

...它不显示。有人可以告诉我我做错了什么吗？

fa-icons.module.ts

 import { NgModule } from '@angular/core';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
// FAS ICONS
import {
  faStar as faSolidStar,
  faUserCircle as faSolidUserCircle,
  faEllipsisV as faSolidEllipsisV,
  faCog as faSolidCog,
  faPowerOff as faSolidPower,
  faPen as faSolidPen,
  faPlusCircle as faSolidPlusCircle,
  faCircle as faSolidCircle,
} from '@fortawesome/free-solid-svg-icons';
// FAR ICONS
import {
  faCircle as faRegCircle,
  faStar as faRegStar
} from '@fortawesome/free-regular-svg-icons';

@NgModule({
  exports: [
    FontAwesomeModule,
  ]
})
export class FaIconsModule {
  constructor(library: FaIconLibrary) {
    library.addIcons(
      faRegCircle,
      faSolidCircle,
      faSolidCog,
      faSolidEllipsisV,
      faSolidPen,
      faSolidPlusCircle,
      faSolidPower,
      faRegStar,
      faSolidStar,
      faSolidUserCircle,
    );
  }
}

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { FaIconsModule } from './modules/fa-icons/fa-icons.module';
import { AppComponent } from './app.component';
import { AuthorsComponent } from './components/authors/authors.component';
import { FavoriteComponent } from './components/favorite/favorite.component';
@NgModule({
  declarations: [
    AppComponent,
    AuthorsComponent,
    FavoriteComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FaIconsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {
}
enter code here
4

0 回答 0