如何在Angular项目中显示Font Awesome v6.4.2品牌图标？

AI 小北

2026-7-11

Angular + Font Awesome v6 图标不显示问题解决

问题根源

你当前的配置存在几个关键问题：

同时安装了新旧两套Font Awesome Angular适配库，导致冲突
未引入品牌（brands）系列图标依赖
使用了错误的图标渲染方式（类名方式不适用于@fortawesome/angular-fontawesome）
冗余的样式配置

具体修复步骤

1. 清理冗余依赖

卸载旧版的angular-font-awesome，保留v6配套的官方适配库：

npm uninstall angular-font-awesome

2. 安装品牌图标依赖

fa-space-awesome属于brands系列，需要安装对应的图标包：

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

3. 修正模块导入

在使用图标的模块（或根模块）中，导入目标图标并注册到图标库：

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faSpaceAwesome } from '@fortawesome/free-brands-svg-icons';
import { FaIconLibrary } from '@fortawesome/fontawesome-svg-core';

@NgModule({
  imports: [
    FontAwesomeModule
  ]
})
export class YourModule { 
  constructor(library: FaIconLibrary) {
    // 将需要的图标添加到全局库中
    library.addIcons(faSpaceAwesome);
  }
}

4. 修正HTML渲染方式

使用@fortawesome/angular-fontawesome提供的<fa-icon>组件替代传统<i>标签：

<fa-icon [icon]="['fab', 'space-awesome']"></fa-icon>

5. 移除冗余样式配置

打开angular.json，删除styles数组中的"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"——因为@fortawesome/angular-fontawesome采用SVG渲染，无需加载该CSS文件。