Font Awesome 是一款很好用的字型圖示，可以使用的圖示很多，省了到處找圖示的困擾；因此深受廣大開發者喜愛，現在Font Awesome已經更新到5.X，使用方法上也和4以前的版本有所不同，並且還增加了收費版；其實免費版已經足夠大家使用啦；下面我就具體介紹一下Font Awesome在vue腳手架專案中的使用方法；

官網：https://fontawesome.com/

安裝 Font Awesome

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

安裝 Font Awesome 樣式依賴

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

注：solid、regular和brands為Font Awesome免費版支援三種樣式；後面使用圖示時，也是在免費庫內選擇；

配置main.js檔案

在main.js檔案內加入一下程式碼

import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import solid from '@fortawesome/fontawesome-free-solid'
import regular from '@fortawesome/fontawesome-free-regular'
import brands from '@fortawesome/fontawesome-free-brands'

fontawesome.library.add(solid)
fontawesome.library.add(regular)
fontawesome.library.add(brands)

Vue.component('font-awesome-icon', FontAwesomeIcon)
 

注意這裡有一個小問題：修改完以上程式碼，我將專案執行起來後，發現控制檯出現了黃色警告，警告內容如下：

 "export 'default' (imported as 'FontAwesomeIcon') was not found in '@fortawesome/vue-fontawesome'

大概意思就是找不到@fortawesome/vue-fontawesome這個模組，但是我檢查了一下package.json檔案，發現@fortawesome/vue-fontawesome模組確實已經安裝過了，沒辦法，我就先把引入這個模組的程式碼註釋了，後來發現程式能正常執行，黃色警告也消失了，如果哪位大神有好的解決辦法可以留言，萬分感謝；

以上安裝步驟就完成了，下面就是使用了；

使用方法很簡單，就是通過Font Awesome官網上的搜尋框，找到自己需要的圖示，將收費的圖示過濾出去，

在右邊選項欄可以切換樣式，選擇好樣式後，點選上面的i標籤，就將程式碼複製下來了，然後貼上到自己的程式碼中需要的位置就搞定了；