vue和小程序項目中使用iconfont的方法
一、vue中使用iconfont
1、百度搜索iconfont或者阿里巴巴矢量圖標庫官網(wǎng),注冊登錄;
2、找到圖標管理->新建項目,或者使用已有的項目,用于保存自己的圖標;

3、搜索自己需要的icon;

4、添加到購物車中;

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

6、點擊購物車,選擇添加至項目。就是我們剛才創(chuàng)建的項目或者之前已有的項目

7、點擊確定,即可將icon添加到我們的項目中

8、然后點擊我的項目,找到自己的項目,即可看到剛才添加的icon

9、點擊下載至本地

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

11、打開解壓好的文件夾,找到iconfont.css

12、把解壓好的文件夾放入項目目錄下,在vue項目中的index.html中引入即可使用
如可以放在public文件夾下

13、在組件中使用

總結:
三步搞定
1、將iconfont下載至本地
2、在項目中引入文件
3、vue中直接使用,然后使用i標簽,通過類來規(guī)定使用的icon
4、小程序中把iconfont.css的后綴名改為wxss,在項目中直接使用i標簽即可
到此這篇關于vue和小程序項目中使用iconfont的方法的文章就介紹到這了,更多相關vue小程序使用iconfont內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue 修改 data 數(shù)據(jù)問題并實時顯示的方法
今天小編就為大家分享一篇vue 修改 data 數(shù)據(jù)問題并實時顯示的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue通過getAction的finally來最大程度避免影響主數(shù)據(jù)呈現(xiàn)問題
這篇文章主要介紹了Vue通過getAction的finally來最大程度避免影響主數(shù)據(jù)呈現(xiàn),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
vue如何解決數(shù)據(jù)加載時,插值表達式閃爍問題
這篇文章主要介紹了vue如何解決數(shù)據(jù)加載時,插值表達式閃爍問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-01-01
詳解vue-cli腳手架build目錄中的dev-server.js配置文件
這篇文章主要介紹了詳解vue-cli腳手架build目錄中的dev-server.js配置文件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
基于腳手架創(chuàng)建Vue項目實現(xiàn)步驟詳解
這篇文章主要介紹了基于腳手架創(chuàng)建Vue項目實現(xiàn)步驟詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08

