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

3、搜索自己需要的icon;

4、添加到購物車中;

5、購物車中就有了相應(yīng)icon

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

7、點(diǎn)擊確定,即可將icon添加到我們的項(xiàng)目中

8、然后點(diǎn)擊我的項(xiàng)目,找到自己的項(xiàng)目,即可看到剛才添加的icon

9、點(diǎn)擊下載至本地

10、將下載的壓縮包進(jìn)行解壓

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

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

13、在組件中使用

總結(jié):
三步搞定
1、將iconfont下載至本地2、在項(xiàng)目中引入文件3、vue中直接使用,然后使用i標(biāo)簽,通過類來規(guī)定使用的icon4、小程序中把iconfont.css的后綴名改為wxss,在項(xiàng)目中直接使用i標(biāo)簽即可
到此這篇關(guān)于vue和小程序項(xiàng)目中使用iconfont的方法的文章就介紹到這了,更多相關(guān)vue小程序使用iconfont內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. 解決Android studio xml界面無法預(yù)覽問題2. 什么是python的自省3. Springboot Druid 自定義加密數(shù)據(jù)庫密碼的幾種方案4. Spring Boot和Thymeleaf整合結(jié)合JPA實(shí)現(xiàn)分頁效果(實(shí)例代碼)5. 詳解Android studio 動(dòng)態(tài)fragment的用法6. Vuex localStorage的具體使用7. php模擬實(shí)現(xiàn)斗地主發(fā)牌8. IntelliJ IDEA安裝插件的方法步驟9. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)10. 使用Android studio查看Kotlin的字節(jié)碼教程

網(wǎng)公網(wǎng)安備