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ī)定使用的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)文章
在Vue2項(xiàng)目中使用Mock.js的詳細(xì)教程
Mock.js?是一個(gè)用于生成隨機(jī)數(shù)據(jù)和攔截?Ajax?請(qǐng)求的?JavaScript?庫,它非常適合在前端開發(fā)中模擬后端?API,尤其是在前后端分離的開發(fā)模式下,本文給大家介紹了如何在Vue2項(xiàng)目中使用Mock.js,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了uniapp?vue與nvue輪播圖輪播圖組件的實(shí)例代碼，代碼簡單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12
vue 修改 data 數(shù)據(jù)問題并實(shí)時(shí)顯示的方法
今天小編就為大家分享一篇vue 修改 data 數(shù)據(jù)問題并實(shí)時(shí)顯示的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vscode中eslint配置保存自動(dòng)修復(fù)代碼示例詳解
vscode根據(jù)eslint保存?動(dòng)修復(fù)配置,下面這篇文章主要給大家介紹了關(guān)于vscode中eslint配置保存自動(dòng)修復(fù)代碼的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Vue通過getAction的finally來最大程度避免影響主數(shù)據(jù)呈現(xiàn)問題
這篇文章主要介紹了Vue通過getAction的finally來最大程度避免影響主數(shù)據(jù)呈現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
這篇文章主要介紹了Vue3造輪子之打包構(gòu)建配置二級(jí)目錄方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue如何解決數(shù)據(jù)加載時(shí),插值表達(dá)式閃爍問題
這篇文章主要介紹了vue如何解決數(shù)據(jù)加載時(shí),插值表達(dá)式閃爍問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
VUE響應(yīng)式原理的實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了VUE響應(yīng)式原理的實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
詳解vue-cli腳手架build目錄中的dev-server.js配置文件
這篇文章主要介紹了詳解vue-cli腳手架build目錄中的dev-server.js配置文件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
基于腳手架創(chuàng)建Vue項(xiàng)目實(shí)現(xiàn)步驟詳解
這篇文章主要介紹了基于腳手架創(chuàng)建Vue項(xiàng)目實(shí)現(xiàn)步驟詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08