首页 > 解决方案 > 使用 angular-fontawesome 和 font-awesome 5 时找不到 FaIconLibrary

问题描述

尝试@fortawesome/angular-fontawesome在我的 Angular 7 应用程序中使用时出现以下错误:

node_modules/@fortawesome/angular-fontawesome/angular-fontawesome"' has no exported member 'FaIconLibrary

我遵循文档并以这种方式初始化模块:

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    (...)
    FontAwesomeModule,
    (...)
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    library.add(...icons);
  }
}

这是我使用的确切版本:

"@angular/core": "7.2.2",
(...)
"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-pro": "^5.11.2",
"@fortawesome/fontawesome-svg-core": "1.2.21",
"@fortawesome/free-brands-svg-icons": "5.10.1",
"@fortawesome/free-regular-svg-icons": "5.10.1",
"@fortawesome/free-solid-svg-icons": "5.10.1",

非常感谢您的帮助!蒂埃里

标签: angularfont-awesomefont-awesome-5angular-fontawesome

解决方案


如果您看到发行说明,则 FaIconLibrary 是从与 Angular 7.2.2 不兼容的版本 0.5.0 添加的。然后你应该使用旧的方式来添加图标,例如:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSquare, faCheckSquare } from '@fortawesome/free-solid-svg-icons';
import { faSquare as farSquare, faCheckSquare as farCheckSquare } from '@fortawesome/free-regular-svg-icons';
import { faStackOverflow, faGithub, faMedium } from '@fortawesome/free-brands-svg-icons'; 

...

export class AppModule {
  constructor() {
    library.add(faSquare, faCheckSquare, farSquare, farCheckSquare, faStackOverflow, faGithub, faMedium);
  }
}

推荐阅读