目錄

• 安裝依賴
• 配置
• 使用
• 1. 進入圖示搜尋頁
• 2. 輸入想使用的圖示的英文，例如使用者的英文是 user
• 3. 過濾收費圖示
• 4.點選圖示檢視
• 5. 檢視結果
• 總結

Font Awesome 官網：https://fontawesome.com/

前端小夥伴們都知道Font Awesome圖示庫，它具有豐富的常用圖示，筆者開發時也經常使用，省卻了自己到處找圖示的困擾，當然阿里的iconfont也不錯，不過它比較雜亂，找的圖示有時候不是配套的，尺寸和比例上有些偏差，即使你只使用某一個圖示庫的圖示難免也會有收錄不全的情況（這是筆者的使用體驗，絕對沒有貶低iconfont的意思，勿噴），Font Awesome通過幾年的發展已經收錄了網際網路最常用的圖示，絕對能滿足大多數人的開發需求（有美工還用自己動手？！！）當然，看標題就知道Font Awesome已經進入5時代，使用方法上也和4以前的版本有所不同，而且還增加了收費版。。。當然免費版已經足夠大家使用啦！下面筆者就給大夥兒講講如何在自己的開發專案中使用Font Awesome 5

安裝依賴

1. 安裝基礎依賴

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

2. 安裝樣式依賴

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

注意：

• 免費版支援三種樣式：solid、regular和brands，後面在使用圖示時根據樣式的不同也會有不同的字首
• 如果下載依賴失敗，試試cnpm，不贅述了！
  

配置

進入main.檔案配置Font Awesome，配置方式比起4以前多了一些程式碼

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)

使用

ok，配置完成之後你就可以隨心所欲的在你的專案上使用Font Awesome了，使用方法如下：

例如，我們想使用 “使用者” 這個圖示：

1. 進入圖示搜尋頁

搜尋地址： https://fontawesome.com/icons...

2. 輸入想使用的圖示的英文，例如使用者的英文是 user

3. 過濾收費圖示

搜尋結果有些是灰色的表示oMzQWkQdXU是收費版的，我們可以在左邊點選篩選項Free來過濾掉收費版

4.點選圖示檢視

選擇一個自己滿意的圖示點進去檢視內容

右邊是選取哪種www.cppcns.com樣式，這裡可以看到這個圖示支援solid和regular和light（收費樣式），然後下面就是我們熟悉的使用程式碼了，不過在Vue裡不能這樣直接使用了，要改為以下的寫法：

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

往icon屬性裡傳入一個數組，第一個引數是樣式，第二個就客棧是圖示名，看起來好像節省了寫 “fa-” 這幾個字元，但是結構感覺比以前複雜(⊙o⊙)…

5. 檢視結果

OK，是時候檢視我們辛苦工作的結果了，開啟瀏覽器檢視圖示效果，引入成功！

總結

Font Awesome 5比之前的版本在圖示優化上絕對是完美級別的，而且圖示庫內容也豐富了很多，不過在配置上相對以前要繁瑣，需要花一點時間， 總體來說是一個很棒的圖示庫，如果覺得有用的小夥伴兒麻煩點個贊哦！

到此這篇關於Vue開發專案中如何使用Font Awesome 5的文章就介紹到這了,更多相關Vue使用Font Awesome5內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！