vue和小程序項目中使用iconfont的方法
一、vue中使用iconfont
1、百度搜索iconfont或者阿里巴巴矢量圖標(biāo)庫官網(wǎng),注冊登錄;
2、找到圖標(biāo)管理->新建項目,或者使用已有的項目,用于保存自己的圖標(biāo);
3、搜索自己需要的icon;
4、添加到購物車中;
5、購物車中就有了相應(yīng)icon
6、點擊購物車,選擇添加至項目。就是我們剛才創(chuàng)建的項目或者之前已有的項目
7、點擊確定,即可將icon添加到我們的項目中
8、然后點擊我的項目,找到自己的項目,即可看到剛才添加的icon
9、點擊下載至本地
10、將下載的壓縮包進(jìn)行解壓
11、打開解壓好的文件夾,找到iconfont.css
12、把解壓好的文件夾放入項目目錄下,在vue項目中的index.html中引入即可使用
如可以放在public文件夾下
13、在組件中使用
總結(jié):
三步搞定
1、將iconfont下載至本地2、在項目中引入文件3、vue中直接使用,然后使用i標(biāo)簽,通過類來規(guī)定使用的icon4、小程序中把iconfont.css的后綴名改為wxss,在項目中直接使用i標(biāo)簽即可
到此這篇關(guān)于vue和小程序項目中使用iconfont的方法的文章就介紹到這了,更多相關(guān)vue小程序使用iconfont內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. Ajax常用封裝庫——Axios的使用2. jsp網(wǎng)頁實現(xiàn)貪吃蛇小游戲3. jsp+servlet簡單實現(xiàn)上傳文件功能(保存目錄改進(jìn))4. CSS Hack大全-教你如何區(qū)分出IE6-IE10、FireFox、Chrome、Opera5. 不使用XMLHttpRequest對象實現(xiàn)Ajax效果的方法小結(jié)6. 在 Ubuntu Linux 上安裝 Oracle Java 14的方法7. 如何在?ASP.NET?Core?Web?API?中處理?Patch?請求8. Android Studio進(jìn)行APP圖標(biāo)更改的兩種方式總結(jié)9. pybind11: C++ 工程提供 Python 接口的實例代碼10. PHP終止腳本運行三種實現(xiàn)方法詳解
