vue項目使用阿里巴巴矢量圖標庫教程

前言:element-ui自帶的圖標庫還是不夠全，還是需要需要引入第三方icon，自己在用的時候一直有些問題，參考了些教程，詳細地記錄補充下. 對於我們來說，首選的當然是阿里icon庫

地址:http://www.iconfont.cn/

1.  阿里注冊登陸賬號

2. 創建一個新的項目

 

再次提醒:

新建項目

項目名稱隨便寫。前綴注意，不要跟element-ui自帶的icon(前綴為：el-icon)重名了。

設置完，點新建

3. 給項目里添加圖標　

　　1. 先添加購物車, 再同意添加到項目里

4. 下載項目到本地

5. 解壓剛下載下來的文件

6. 將解壓出來的所有文件導入到vue項目里, 我導入到了 static/font目錄下

 

 

7. 修改iconfont.css里的代碼(需要增加下面這個代碼)

注意: 這里el-icon-myproject 就是你項目里填寫的前綴名字

[class^="el-icon-myproject"], [class*=" el-icon-myproject"] {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 

 

8. 再main.js函數中導入剛才修改過的css文件

 

 

9. 直接在代碼里像使用element的icon一樣