vue中使用iconfont

第一步： 進入官網，注冊--登錄

阿里巴巴矢量庫

第二步： 圖標管理---我的項目--創建項目---新建

 

新建項目

第三步： 進入圖標庫--官方圖標庫

 

開始選擇圖標

第四步：選中圖標-- 添加入庫-- 添加至項目---選擇剛剛創建的項目--確定

下面舉例我們選擇了兩個圖標

 

購物車中的圖標

 

添加至項目

第五步： 下載至本地---- 點擊下載至本地按鈕

 

下載至本地

第六步： 解壓下載的壓縮文件----整理放入vue中的static中（在static中新建文件夾 icon ），同時直接把iconfont.css放入static中

 

放入src/assets/icon中

 

 

 

 

 

第七步： vue的main.js中引入 *注意必須： npm install css-loader -s 否則報錯

import "../static/iconfont.css" 

第八步： 使用iconfont

<i class="iconfont icon-eye" style="color: #999;font-size: 20px;"></i>

 

圖標

vue報錯原因：

• 沒有npm install css-loader -s
• 沒有修改iconfont的URL的引用地址
• 沒有在main.js中引入iconfont.css

作者：冬天的_太陽
鏈接：https://www.jianshu.com/p/fa6ce8e6b011
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。