Vue 使用 Font Awesome 5

Vue 使用 Font Awesome 5

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

前端小夥伴們都知道Font Awesome圖標庫，它具備豐富的經常使用圖標，筆者開發時也常用，省卻了本身處處找圖標的困擾，固然阿里的iconfont也不錯，不過它比較雜亂，找的圖標有時候不是配套的，尺寸和比例上有些誤差，即便你只使用某一個圖標庫的圖標不免也會有收錄不全的狀況（這是筆者的使用體驗，絕對沒有貶低iconfont的意思，勿噴），Font Awesome經過幾年的發展已經收錄了互聯網最經常使用的圖標，絕對能知足大多數人的開發需求（有美工還用本身動手？！！）固然，看標題就知道Font Awesome已經進入5時代，使用方法上也和4之前的版本有所不一樣，並且還增長了收費版。。。固然免費版已經足夠你們使用啦！下面筆者就給大夥兒講講如何在本身的vue開發項目中使用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.js文件配置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. 過濾收費圖標

搜索結果有些是灰色的表示是收費版的，咱們能夠在左邊點擊篩選項Free來過濾掉收費版

4.點擊圖標查看

選擇一個本身滿意的圖標點進去查看內容

右邊是選取哪一種樣式，這裏能夠看到這個圖標支持solid和regular和light（收費樣式），而後下面就是咱們熟悉的使用代碼了，不過在Vue裏不能這樣直接使用了，要改成如下的寫法：
<font-awesome-icon :icon="['fas','user]"/>
往icon屬性裏傳入一個數組，第一個參數是樣式，第二個就是圖標名，看起來好像節省了寫 「fa-」 這幾個字符，可是結構感受比之前複雜(⊙o⊙)…

5. 查看結果

OK，是時候查看咱們辛苦工做的結果了，打開瀏覽器查看圖標效果，引入成功！

總結

Font Awesome 5比以前的版本在圖標優化上絕對是完美級別的，並且圖標庫內容也豐富了不少，不過在配置上相對之前要繁瑣，須要花一點時間， 整體來講是一個很棒的圖標庫，若是以爲有用的小夥伴兒麻煩點個贊哦！