如何在 Vue 中使用 Font Awesome 字體圖標

安裝

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/free-solid-svg-icons

• 第一行的依賴是 Font Awesome 的核心部分
• 第二行的依賴是 Font Awesome 在 Vue 環境中使用需要的 Vue 組件
• 第三行的依賴是 Font Awesome 的 solid 風格圖標

配置

// src/main.js

import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUser, faCamera } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
library.add(faUser, faCamera)
 
Vue.component('font-awesome-icon', FontAwesomeIcon)
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

找圖標

去 Font Awesome 官網找需要的圖標。

class 中的 fas 代表 solid 風格，fa-camera 是這個圖標的名稱。

需要在配置的時候引入該圖標，引入完畢後還要在覈心依賴中加入這個引入的圖標。（即 👆配置 中的 第6行 和 第9行 代碼）

使用

因爲已經全局註冊了組件，所以不管在哪個 Vue 組件中都可以使用。

<font-awesome-icon :icon="['fas', 'user']"></font-awesome-icon>
<font-awesome-icon :icon="['fas', 'camera']"></font-awesome-icon>

其中 font-awesome-icon 是剛在 main.js 註冊好的組件名(Vue.component('font-awesome-icon', FontAwesomeIcon))，:icon 屬性是一個數組，用來指定具體圖標，剛剛的 class 中有兩個屬性，分別是 fas 和 fa-camera，第一個 fas 保留，第二個 fa-camera 去掉開頭的 fa- 保留剩下的，作爲數組的兩個元素，就可以正確指定我們要的圖標。

---

🔗 文檔：https://www.npmjs.com/package/@fortawesome/vue-fontawesome