Angular Nx项目中Storybook无法加载FontAwesome图标问题

1. 补全Storybook的全局样式引入 #

你的Angular应用应该已经在全局样式文件（比如styles.scss）里加了FontAwesome的CSS导入：

@import '@fortawesome/fontawesome-free/css/all.css';

但Storybook不会自动继承应用的全局样式配置，得手动补充：

• 打开.storybook/preview.js，选择以下一种方式导入：

// 方式一：直接导入FontAwesome核心CSS
import '@fortawesome/fontawesome-free/css/all.css';
// 方式二：复用应用全局样式（推荐，同步所有全局样式配置）
import '../apps/[你的应用名称]/src/styles.scss';

2. 配置Storybook的Angular模块（针对Angular FontAwesome组件） #

如果你用的是@fortawesome/angular-fontawesome组件库（而非纯CSS类名图标），需要确保Storybook能识别FontAwesome模块：

• 单个stories文件配置：在组件的stories文件中，通过moduleMetadata导入所需模块

import { Meta, StoryObj } from '@storybook/angular';
import { VhButtonComponent } from './vh-button.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faSearch } from '@fortawesome/free-solid-svg-icons';

const meta: Meta<VhButtonComponent> = {
  component: VhButtonComponent,
  decorators: [
    moduleMetadata({
      imports: [FontAwesomeModule],
    }),
  ],
};

export default meta;
type Story = StoryObj<VhButtonComponent>;

export const Primary: Story = {
  args: {
    icon: faSearch, // 匹配你组件接收图标的参数名
  },
};

• 全局配置：嫌每个stories重复写麻烦的话，直接在.storybook/main.js里复用应用根模块

module.exports = {
  // 其他原有配置不变
  angularOptions: {
    bootstrapModule: '../apps/[你的应用名称]/src/app/app.module.ts',
  },
};

3. 确保Storybook打包FontAwesome字体资源 #

FontAwesome图标依赖webfonts文件，未加入打包列表会导致图标无法渲染。打开project.json找到对应项目的storybook目标，补充assets配置：

{
  "targets": {
    "storybook": {
      "executor": "@nx/storybook:storybook",
      "options": {
        "assets": [
          "apps/[你的应用名称]/src/favicon.ico",
          "apps/[你的应用名称]/src/assets",
          // 新增这行，将FontAwesome字体文件复制到构建目录
          {
            "input": "node_modules/@fortawesome/fontawesome-free/webfonts",
            "output": "webfonts"
          }
        ],
        // 其他原有配置不变
      }
    }
  }
}

4. 清缓存重启服务 #

缓存可能导致配置不生效，执行以下命令彻底清理后重启Storybook：

nx reset
npm run storybook -- --no-cache

重启后如果仍有问题，打开浏览器开发者工具排查：

• 查看Network标签，确认FontAwesome的CSS和webfonts文件没有404错误
• 查看Elements标签，检查图标元素的类名（比如fa fa-search）是否正确，字体样式是否正常应用

内容的提问来源于stack exchange，提问作者Ruben