如何在无模块的Vue 3全局项目中集成FontAwesome？

1. 引入所需CDN资源 #

在HTML中按依赖顺序引入以下脚本和样式，确保资源加载顺序正确：

<!-- Vue 3 全局脚本 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- FontAwesome 核心库与图标包 -->
<script src="https://unpkg.com/@fortawesome/fontawesome-svg-core@6.4.0/dist/all.min.js"></script>
<script src="https://unpkg.com/@fortawesome/free-solid-svg-icons@6.4.0/dist/all.min.js"></script>
<!-- Vue3 FontAwesome 组件适配器 -->
<script src="https://unpkg.com/@fortawesome/vue-fontawesome@3.0.3/dist/vue-fontawesome.global.js"></script>

<!-- Vuetify 3 样式与脚本 -->
<link href="https://cdn.jsdelivr.net/npm/vuetify@3.3.14/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.3.14/dist/vuetify.min.js"></script>

若需使用更多图标类型（如regular、品牌图标），添加对应CDN即可，比如@fortawesome/free-regular-svg-icons的全局脚本。

2. 全局注册FontAwesome组件 #

在你的自定义全局脚本中，将FontAwesome组件注册到Vue实例：

const { createApp } = Vue;
const app = createApp({
  // 你的根组件选项
});

// 注册全局FontAwesome图标组件
app.component('font-awesome-icon', FontAwesomeIcon);

// 批量添加全局可用的图标（按需选择）
FontAwesome.library.add(faUser, faHome, faEdit);

3. 配置Vuetify集成FontAwesome #

初始化Vuetify时，通过icons配置项将FontAwesome设为默认图标集，并设置别名：

app.use(Vuetify, {
  icons: {
    defaultSet: 'fa',
    // 自定义图标别名，方便在Vuetify组件中快速调用
    aliases: {
      home: faHome,
      user: faUser,
      edit: faEdit
    },
    sets: {
      fa: {
        component: FontAwesomeIcon,
        props: {
          // 可选：设置默认图标样式
          icon: ['fas', 'question-circle']
        }
      }
    }
  }
});

app.mount('#app');

4. 在模板中使用图标 #

现在可以直接在Vue模板中通过两种方式调用图标：

<!-- 方式1：通过Vuetify组件使用别名 -->
<v-btn icon="home"></v-btn>
<v-icon>user</v-icon>

<!-- 方式2：直接使用FontAwesome组件 -->
<font-awesome-icon :icon="['fas', 'edit']"></font-awesome-icon>

关键说明 #

• 无需Vuetify-fa.js：全局模式下直接通过Vuetify的icons配置项完成集成，不需要额外的该文件。
• 全局对象访问：FontAwesome的核心方法在FontAwesome全局对象下，图标变量（如faHome）会随对应图标包CDN自动注册为全局变量。
• 按需优化：若仅需少量图标，可替换全量图标包CDN为单个图标引入（比如https://unpkg.com/@fortawesome/free-solid-svg-icons@6.4.0/faHome.js），减少资源体积。

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