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