MUKI AI Summary
在 Vue 中使用 Font Awesome，可以參考官方的 Github 文件。在 main.js 匯入 Font Awesome，並在 Vue 中註冊 FontAwesomeIcon 元件。使用 icon 時需個別匯入，若需多個 icon，操作較繁瑣。
若想一次匯入所有 Font Awesome icon，可匯入 fas 來包含所有 solid icon，這樣就不需個別匯入。更多種類如 fas、far、fal、fab，分別代表 Solid、Regular、Light 和 Brands。...
使用 Font Awesome
如果想在 Vue 使用 Font Awesome，可以參考官方的 Github 文件
1. 在 main.js 匯入 Font Awesome
import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faUserSecret)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})2. 在 vue 裡使用 icon
<template>
<div id="app">
<font-awesome-icon icon="user-secret" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>但是官方給的範例是「你要用哪一個 icon，就匯入哪一個 icon」，所以我們只能使用 user-secret 這個 icon，假設要使用兩個以上的 icon，就必須一直匯入，非常的麻煩。
使用 Font Awesome 所有 icon
如果你希望在 Vue 裡可以一次匯入所有 icon，不需要個別匯入的話，可以改用以下寫法：
import { library } from '@fortawesome/fontawesome-svg-core'
// fas 是所有的 solid icon
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})如此一來，不需要個別匯入就可以使用所有的 Font Awesome icon 囉！
更多種類請參考：
fas：Solidfar：Regularfal：Lightfab：Brands
歡迎給我點鼓勵，讓我知道你來過 ：）