Vue中級指南-03 如何在Vue項目使用阿里iconfont圖標

咱們在使用vue進行項目開發的時候,不少時候會手擼樣式或者使用ui框架,這時候ui框架提供的原生icon圖標可能會知足咱們現有的需求,這時候咱們就能夠引用第三方圖標庫來達到咱們的需求。

這裏講解的是如何在vue中使用阿里圖標;

阿里圖標庫有三種使用方式（Unicode、Font class、Symbol)
這裏主要說明 Font class 的使用方法（其餘方法相似）
複製代碼

1、引入

• 登陸阿里圖標官網註冊一個賬號,在圖標庫中選取本身須要的圖標加入購物車

• 點擊購物車查看我已經添加到購物車的圖標,點擊添加至項目,沒有項目新建一個

• 進入個人項目中,將圖標下載至本地,在vue項目中assets文件下新建iconfont文件夾將下載的圖標複製到這裏

由於這裏主要說明Font class 的使用方法,因此只須要拷貝這兩個文件（其餘方法相似）
複製代碼

• 注意這裏須要將iconfont.css文件中引用的路徑所有修改成'./iconfont.ttf'

這裏所有改成'./iconfont.ttf'是由於咱們當前只使用Font class 的使用方法（其餘方法相似）
複製代碼

• 在main.js文件中引入阿里圖標,將其掛載到全局,之後每一個頁面均可以使用

  

這裏引入阿里圖標樣式可能會報錯,緣由是沒有css-loader依賴包,安裝一下就能夠了
npm install css-loader -S
複製代碼

• 這裏阿里圖標的引入就所有完成了,接下來使用方式如圖:

---

這裏使用阿里圖標都須要加iconfont前綴類名,不然不會顯示出來的,固然這個類名是能夠在阿里圖標官網本身編輯的,默認都是iconfont

• 修改默認iconfont前綴類名

• 修改Font Famliy 修改成myicon,點擊保存從新下載至本地替換當前阿里圖標便可

• 這時候使用圖標時前綴加myicon便可了

以上就是如何在vue中引用阿里圖標的詳細步驟了,完結撒花。