Vue3项目中如何仅加载已使用的Font Awesome图标并保留字体特性？

核心思路 #

通过 Font Awesome 官方的 Vue3 组件库，结合自定义 webfont 子集（或按需导入图标配合官方 webfont），既实现只加载用到的图标，又保留字体样式特性（可通过 font-size、color 等 CSS 属性直接调整）。

步骤1：安装依赖 #

根据需要的图标类型，安装对应包：

# 基础依赖：Vue3组件、核心库、CLI（用于构建自定义webfont）
npm install @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core
npm install --save-dev @fortawesome/fontawesome-cli

# 按需安装图标包（示例：免费solid样式图标）
npm install @fortawesome/free-solid-svg-icons
# 如需其他样式，比如regular/brands，安装对应包：
# npm install @fortawesome/free-regular-svg-icons
# npm install @fortawesome/free-brands-svg-icons

步骤2：构建自定义webfont子集（可选但推荐） #

如果想彻底避免加载全量webfont，用CLI生成只包含所需图标的字体文件：

1. 在项目根目录创建配置文件 .fontawesome.json，指定需要的图标和输出路径：

{
  "icons": ["user", "home"], // 填写你实际要用的图标名称
  "styles": ["solid"], // 图标样式（solid/regular/brands）
  "output": "./src/assets/fonts" // 生成的字体文件存放路径
}

2. 执行命令生成子集：

npx fontawesome subset

执行后，src/assets/fonts 目录会生成仅包含指定图标的webfont文件和对应的CSS。

步骤3：全局配置Vue3项目 #

在 main.js 中配置Font Awesome，注册组件并启用webfont模式：

import { createApp } from 'vue'
import App from './App.vue'
import { library, config } from '@fortawesome/fontawesome-svg-core'
// 按需导入你需要的图标（和子集配置里的图标对应）
import { faUser, faHome } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// 禁用SVG自动样式，改用webfont
config.autoAddCss = false
// 导入自定义生成的webfont样式（如果用官方全量webfont，就替换成@fortawesome/fontawesome-webfonts的CSS）
import './assets/fonts/fontawesome.css'
import './assets/fonts/solid.css'

// 将图标加入全局库
library.add(faUser, faHome)

const app = createApp(App)
// 全局注册图标组件，方便所有组件使用
app.component('font-awesome-icon', FontAwesomeIcon)

app.mount('#app')

步骤4：在组件中使用 #

和Angular的<fa-icon>类似，用<font-awesome-icon>标签调用图标，直接用CSS属性调整样式：

<template>
  <div class="icon-demo">
    <!-- 基础使用：指定图标名称 -->
    <font-awesome-icon icon="user" style="font-size: 24px; color: #ff4444;" />
    <!-- 多样式图标：比如brands类的github（需提前导入faGithub并加入library） -->
    <font-awesome-icon :icon="['fab', 'github']" class="github-icon" />
  </div>
</template>

<style scoped>
.github-icon {
  font-size: 32px;
  color: #333;
  margin-left: 16px;
}
</style>

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