vue中和小程序中使用iconfont

1、vue中使用iconfont

一、百度搜索iconfont或者阿里巴巴矢量圖標庫官網，註冊登陸；
二、找到圖標管理->新建項目，或者使用已有的項目，用於保存本身的圖標；

三、搜索本身須要的icon；

四、添加到購物車中；

五、購物車中就有了相應icon

六、點擊購物車，選擇添加至項目。就是咱們剛纔建立的項目或者以前已有的項目

七、點擊肯定，便可將icon添加到咱們的項目中

八、而後點擊個人項目，找到本身的項目，便可看到剛纔添加的icon

九、點擊下載至本地

十、將下載的壓縮包進行解壓

十一、打開解壓好的文件夾，找到iconfont.css

十二、把解壓好的文件夾放入項目目錄下，在vue項目中的index.html中引入便可使用
如能夠放在public文件夾下

1三、在組件中使用

2、小程序中使用iconfont

前10步同vue中運用步驟
十一、新建assets文件夾，將解壓後的每一個文件能夠放在assets下面

十二、在全局樣式app.wxss中引入iconfont.css文件，這時報錯。這是由於小程序只能識別以.wxss結尾的css文件，不能識別標準的.csss文件，因此要將iconfont.css文件名改成iconfont.wxss。

1三、在組件中使用本身須要的iconfont

1四、實如今小程序中使用icon,如圖

總結：三步搞定

一、將iconfont下載至本地
二、在項目中引入文件
三、vue中直接使用，而後使用i標籤，經過類來規定使用的icon
四、小程序中把iconfont.css的後綴名改成wxss，在項目中直接使用i標籤便可