今天要紀錄一下Font Awesome的使用。

以前在一般HTML檔中使用Font Awesome的時候，CDN引入一下簡單馬上就可以使用Font Awesome了，在Vue Cli裡面使用卻感覺一波三折，突然覺得Font Awesome好難用了，但仔細反省只是自己不會用啊...

網路上蒐到許多使用方法，不過其他照著跑後都沒成功，這裡就只寫我最後找到的方法囉。

首先用套件方式安裝Font Awesome。
npm install --save-dev @fortawesome/fontawesome-free

然後在「main.js」裡面引入：

import Vue from 'vue'
import App from './App.vue'
...
import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'

這樣基本上就可以在 template 裡面開心地使用Font Awesome啦！

不過如下在操作元素的時候，在 v-if 上遇到奇怪的Bug，不管怎麼試，放在網頁上的icon就是沒辦法按照想要的樣子顯示或消失。

<i class="fas fa-spinner fa-spin" v-if="status.fileUploading"></i>

最後在這裡找到了答案。

原來Font Awesome本身對<i></i>標籤做了特殊處理，所以到template裡面的時候，Vue無法直接操控<i></i>標籤，必須在外面多包一層。

<span v-if="status.fileUploading">
  <i class="fas fa-spinner fa-spin"></i>
</span>

改成操控外層的<span></span>後，Vue Cli上的Font Awesome就能正常運作囉。

以上，結案。