vue和小程序項(xiàng)目中使用iconfont的方法
一、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)簽即可
到此這篇關(guān)于vue和小程序項(xiàng)目中使用iconfont的方法的文章就介紹到這了,更多相關(guān)vue小程序使用iconfont內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作
這篇文章主要介紹了vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問題
這篇文章主要介紹了Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-11-11淺談Vue.js之初始化el以及數(shù)據(jù)的綁定說明
今天小編就為大家分享一篇淺談Vue.js之初始化el以及數(shù)據(jù)的綁定說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue如何設(shè)置描點(diǎn)跳轉(zhuǎn)到對(duì)應(yīng)頁面
這篇文章主要介紹了vue如何設(shè)置描點(diǎn)跳轉(zhuǎn)到對(duì)應(yīng)頁面問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問題解決方案
在lodash函數(shù)工具庫(kù)中,防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用,這篇文章主要介紹了vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問題與解決,需要的朋友可以參考下2023-10-10