Vue中如何引入第三方icon庫（阿里巴巴矢量圖標庫）

1、進入阿里巴巴矢量圖標庫；

 

 

 

 2、新建項目

 

3、前綴注意不要跟element-ui自帶的icon(el-icon)重名就ok

 4、創建完成后，去阿里選自己要使用的圖標，加入購物車

 

                                                                                                                                                                                                                           

 5、找到自己創建的項目，選中Font class ，點擊下載至本地。

 

 6、解壓文件后，打開iconfont.css

 7、在.iconfont {} 后加入以下代碼，（注意 1 2數據要保持一致！）

// 添加的新的樣式
[class^="el-icon-third"],
[class*=" el-icon-third"]/*這里有空格*/

{ 
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

 

 8、設置好后，打開你的vue項目，在src/assets下創建文件夾icon,將剛才下載的所有的文件復制了過去。

      

9、現在就可以在項目中引入圖標了。圖標名稱前必須添加上整個圖標的名稱，然后再添加圖標名字作為類名。

<i class="iconfont icontuding"></i> 也就是 <i class="類名 圖標名"></i>