這篇文章主要講解了vue和小程序項(xiàng)目中如何使用iconfont，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),豐澤企業(yè)網(wǎng)站建設(shè),豐澤品牌網(wǎng)站建設(shè),網(wǎng)站定制,豐澤網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,豐澤網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

一、vue中使用iconfont

1、百度搜索iconfont或者阿里巴巴矢量圖標(biāo)庫(kù)官網(wǎng)，注冊(cè)登錄；

2、找到圖標(biāo)管理->新建項(xiàng)目，或者使用已有的項(xiàng)目，用于保存自己的圖標(biāo)；

3、搜索自己需要的icon；

4、添加到購(gòu)物車中；

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

6、點(diǎn)擊購(gòu)物車，選擇添加至項(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ī)定使用的icon
4、小程序中把iconfont.css的后綴名改為wxss，在項(xiàng)目中直接使用i標(biāo)簽即可

看完上述內(nèi)容，是不是對(duì)vue和小程序項(xiàng)目中如何使用iconfont有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。