Vue项目中Font Awesome图标加载失败问题求助

模板代码：

<v-col v-for="sub in subclasses" :key="sub.sub">
  <div class="d-flex justify-center">
    <v-btn
      @click="goTo(sub.title)"
      class="mb-2"
      color="rgb(54, 61, 68)"
    >
      <font-awesome-icon
        class="fa-2x"
        :icon="['fa', sub.icon]"
      />
    </v-btn>
  </div>
  <p class="text-center">{{ sub.title }}</p>
</v-col>

数据结构：

subclasses: [
    {
      title: "Ancestral Guardian",
      value: 1,
      icon: "paw",
    },
    {
      title: "Battlerager",
      value: 2,
      icon: "user-secret",
    },
  ],

错误提示：

Could not find one or more icon(s) {prefix: 'fas', iconName: 'paw'}iconName: "paw"prefix: "fas"[[Prototype]]: Object {}

解决步骤 #

1. 修正图标样式前缀 #

paw图标属于Font Awesome的regular样式（前缀far），而非默认的solid样式（前缀fas）。你当前代码里的['fa', sub.icon]会自动映射为fas前缀，导致找不到图标。

• 直接修改模板前缀：

<font-awesome-icon
  class="fa-2x"
  :icon="['far', sub.icon]"
/>

• 若不同图标属于不同样式，可在数据中指定前缀：

subclasses: [
    {
      title: "Ancestral Guardian",
      value: 1,
      icon: "paw",
      prefix: "far"
    },
    {
      title: "Battlerager",
      value: 2,
      icon: "user-secret",
      prefix: "fas"
    },
  ],

模板动态绑定前缀：

<font-awesome-icon
  class="fa-2x"
  :icon="[sub.prefix, sub.icon]"
/>

2. 安装对应图标包 #

使用@fortawesome/vue-fontawesome时，需安装对应样式的图标包：

• 安装regular图标包：

npm install @fortawesome/free-regular-svg-icons

• 若未安装solid图标包，补充安装：

npm install @fortawesome/free-solid-svg-icons

3. 注册图标 #

全局注册（适合多场景使用图标）

在项目入口文件（如main.js）中：

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fas, far)
Vue.component('font-awesome-icon', FontAwesomeIcon)

按需导入（减少打包体积）

在使用图标的组件中：

import { library } from '@fortawesome/fontawesome-svg-core'
import { faPaw } from '@fortawesome/free-regular-svg-icons'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faPaw, faUserSecret)

export default {
  components: {
    FontAwesomeIcon
  },
  // 其余组件代码
}

内容的提问来源于stack exchange，提问作者Abdullah Semih Gür