【vue.js】vue項目使用Iconfont（阿里圖標庫）

vue項目使用Iconfont（阿里圖標庫）

---

2019-11-12  19:07:02  by沖沖

 

一、操做步驟

① 登陸阿里巴巴矢量圖標庫 https://www.iconfont.cn ，註冊帳號/關聯帳號。

② 前往「圖標管理」--「個人項目」

③ 點擊

④ 建立圖標庫

 注意：

A. FontClass/Symbol前綴 很重要，若是項目中使用到ElementUI庫就必定不要把前綴寫成「el-icon」，會和ElementUI庫的自帶圖標（icon）衝突，致使你圖標顯示不出來。

B. FontFamily必須寫，可是內容沒有嚴格限制（寫啥都成）。

⑤ 選擇須要的圖標，添加入庫

 

 ⑥ 下載至本地

 

 

 ⑦ 解壓

 紅圈的文件是有用的，其餘的沒啥用。

⑧ 放置到vue項目

在src文件夾，新建asset文件夾，裏面再新建icon文件夾，存放紅圈文件。

⑨ 在項目main.js文件導入

iconfont.css

 ⑩ 使用

 經過修改font-size，修改大小

 

二、參考

https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code