vue.js里使用fontawesome免费图标

太空铃兰2025-07-22 10:32

下载必要的图标库

cmd 复制代码

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

下载`fontawesome`的vue组件

cmd 复制代码

npm i --save @fortawesome/vue-fontawesome@latest-3

在`mian.js`里引入

js 复制代码

// in main.ts
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

/* add icons to the library */
library.add(faUserSecret)

const app = createApp(App)
app.component('font-awesome-icon', FontAwesomeIcon)
app.use(createPinia())
app.use(router)

app.mount('#app')

使用图标须知

我们使用某个图标时需要将它的图标名导入main.js:import { faUserSecret } from '@fortawesome/free-solid-svg-icons，然后添加到library中library.add(faUserSecret)

当我们在官网上找到需要引入的图标时，选择vue，例如<font-awesome-icon :icon="['far', 'sun']" />数组里的内容有两个细节：

fa是图标的固定前缀，r代表此图标来自我们npm下载的solid, regular, brands里的regular库，fas就代表solid, fab代表brands. 图标名是fa+sun,即faSun。
在mian.js里我从solid库引入faUserSecret图标，引入和添加到我自己的library里。使用时就是<font-awesome-icon :icon="['fas', 'user-secret']" />

测试

App.vue