如何在 Vue 裡面使用 Font Awesome
剛開始接觸網頁設計，需要 icon 時一定會想到 Font Awesome 吧！
一般來說引入它非常簡單，只需要到 Font Awesome 註冊帳號，得到 kits 之後把那段 script 貼到 <head> 裡面就好，接下來就可以一直複製貼上～～
但是當我們開始用前端框架時（以Vue來說），就沒有像上述這麼容易了（不過也不難啦），我們必須改用 vue-fontawesome。
首先，依據 vue-fontawesome 中給的指示下載套件，下載會用到的那些就好了，像是他有分 free-solid、free-brands、free-regular ，如果你付費升級就會有 pro-solid、pro-regular、pro-light 等等，要是不清楚準備使用的 icon 屬於哪一個分類，直接到官網去看就好了，最左邊都有。
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/vue-fontawesome
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/free-brands-svg-icons確認下載完畢後，到你 Vue App 的 main.js 檔案中引入。
import { library } from '@fortawesome/fontawesome-svg-core'import { faFacebookSquare, faInstagram } from '@fortawesome/free-brands-svg-icons'import { faShoppingCart } from '@fortawesome/free-solid-svg-icons'import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
像是我需要用到購物車、FB、IG 的 icon，我在引入的時候就要特別寫出這幾個 icon 的名稱（faFacebookSquare、faInstagram、faShoppingCart），這是有固定寫法的喔！目前看起來就是將原本的 class 名稱用駝峰式連起來
從 fab fa-facebook-square 變成 faFacebookSquare，fab 是 prefix（樣式前綴詞）而且要確定引入的分類是對的，像是購物車要從 free-solid 裡面引入，FB 跟 IG 要從 free-brands。
另外我們也可以直接加入整個Style(樣式種類)下的所有 Icons。
import { fab } from '@fortawesome/free-brands-svg-icons'對應如下：
- fas｜Solid
- far｜Regular
- fal｜Light
- fab｜Brands
接著把這些 icon 加到 library 中：
library.add(faShoppingCart, faInstagram, faFacebookSquare)然後要註冊全局組件：
Vue.component('font-awesome-icon', FontAwesomeIcon) //使用kebab-case注意以上都是寫在 main.js 裡哦！
最後要把 icon 應用在 template 中，有兩種方式：
第一種： <font-awesome-icon icon=”shopping-cart” />第二種： <font-awesome-icon :icon=”[‘fab’, ‘instagram’]” />
沒有指定樣式前綴詞時，預設都是 fas（solid），所以寫出以下的東西是不行的：
<font-awesome-icon icon=”instagram” />因為 instagram 屬於 brands，他的 prefix 是 fab。
好的，以上資訊是耗費數小時才研究出來的成果，sometimes 真的會被自己給笨死（還是 always），搞懂的那一刻覺得我很白痴欸怎麼看那麼久才發現，總之紀錄下來，也許幫助得到別人～～～
