前端小伙伴們都知道Font Awesome圖標庫，它具有豐富的常用圖標，筆者開發時也經常使用，省卻了自己到處找圖標的困擾，當然阿里的iconfont也不錯，不過它比較雜亂，找的圖標有時候不是配套的，尺寸和比例上有些偏差，即使你只使用某一個圖標庫的圖標難免也會有收錄不全的情況（這是筆者的使用體驗，絕對沒有貶低iconfont的意思，勿噴），Font Awesome通過幾年的發展已經收錄了互聯網最常用的圖標，絕對能滿足大多數人的開發需求（有美工還用自己動手？！！）當然，看標題就知道Font Awesome已經進入5時代，使用方法上也和4以前的版本有所不同，而且還增加了收費版。。。當然免費版已經足夠大家使用啦！下面筆者就給大伙兒講講如何在自己的vue開發項目中使用Font Awesome 5
vue的配置就暫且不說，主要是之后的font-awesome5的配置：
1、安裝fontawesome基礎配置
npm i --save @fortawesome/fontawesomenpm i --save @fortawesome/vue-fontawesome
2、安裝fontawesome樣式依賴
npm i --save @forawesome/fontawesome-free-solidnpm i --save @forawesome/fontawesome-free-regularnpm i --save @fortawesome/fontawesome-free-brands
或者兩步合一
3、在main.js中配置font-awesome
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)
4、在vue頁面使用
<font-awesome-icon :icon="['far','address-book']"/>
當然并非一定要寫成font-awesome-icon標簽，它只是組件與main.js里面的Vue.component對照，main.js的Vue.component只是將其作為全局組件。在:icon="['樣式','省去樣式前綴的圖表名']"，
上面這些是使用font-awesome 5.0.13
對于5.6.3版本來說，因為新增加了Font Awesome SVG Core.所以5.6.3的安裝:
1、安裝fontawesome基礎配置
npm i --save @fortawesome/fontawesome-svg-corenpm i --save @fortawesome/free-solid-svg-iconsnpm i --save @fortawesome/vue-fontawesome
2、在main.js中配置font-awesome
import { library } from '@fortawesome/fontawesome-svg-core'import { fas } from '@fortawesome/free-solid-svg-icons'import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'library.add(fas)Vue.component('font-awesome-icon', FontAwesomeIcon)3、在頁面中可以寫入
<font-awesome-icon icon="address-book" />
或
<font-awesome-icon :icon="['fas', 'address-book']" />
對于非fas的可以直接寫
<font-awesome-icon far icon="spinner" />
還剩下fal和fab的這兩項在5.6.3版本中尚不知道不用pro該怎么安裝，求大佬補充
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
