在微信小程序中使用iconfont的最新圖文教程
一、選取需要的icon
1、在iconfont上選取自己所需要的圖標(biāo)，然后添加到庫內(nèi)
2、將挑選的圖標(biāo)添加到自定義的項(xiàng)目中
3、選擇生成font class的代碼
4、點(diǎn)擊鏈接進(jìn)入代碼并復(fù)制全部
二、在微信小程序中使用iconfont
1、在項(xiàng)目下創(chuàng)建style文件夾，并建立所需要的wxss文件
然后在wxss文件中將在iconfont上生成的css代碼全部復(fù)制進(jìn)去
2、在app.wxss內(nèi)引用
3、使用icon
<view class="iconfont icon-shangxiahuadong"></view>
這里的icon-shangxiahuadong可以直接在iconfont上復(fù)制代碼即可，其余部分是固定的。（<view class="iconfont "></view>）但是首先要保證在style內(nèi)創(chuàng)建的wxss內(nèi)有該icon的樣式。
三、其他
1、如果要改變樣式外觀可以在wxss文件中直接修改
2、如果是想要根據(jù)點(diǎn)擊事件來改變圖標(biāo)的顏色，可以直接監(jiān)聽事件然后加一個(gè)class上去即可。
總結(jié)
到此這篇關(guān)于在微信小程序中使用iconfont的文章就介紹到這了,更多相關(guān)微信小程序使用iconfont內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
前端HTTP發(fā)POST請(qǐng)求攜帶參數(shù)與后端接口接收參數(shù)的實(shí)現(xiàn)
近期在學(xué)習(xí)的時(shí)候,碰到一個(gè)關(guān)于post的小問題,故拿出來分享一下,下面這篇文章主要給大家介紹了關(guān)于前端HTTP發(fā)POST請(qǐng)求攜帶參數(shù)與后端接口接收參數(shù)的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了js+html5繪制圖片到canvas的方法,涉及html5元素操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
這篇文章主要通過動(dòng)畫的示例來為大家詳細(xì)介紹一下JavaScript的函數(shù)封裝，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下2022-03-03
JavaScript實(shí)現(xiàn)簡單的彈窗效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
詳解JavaScript中原始數(shù)據(jù)類型Symbol的使用
Symbol是es6引入的一個(gè)新的原始數(shù)據(jù)類型，是一個(gè)獨(dú)一無二的值。這篇文章主要為大家介紹了JavaScript中原始數(shù)據(jù)類型Symbol的使用，感興趣的可以了解一下2023-02-02
JavaScript的變量聲明與聲明提前用法實(shí)例分析
這篇文章主要介紹了JavaScript的變量聲明與聲明提前用法,結(jié)合實(shí)例形式分析了JavaScript變量聲明與聲明提前相關(guān)原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-11-11
javascript實(shí)現(xiàn)用戶管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)用戶管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
JavaScript 是世界上最流行的編程語言。javaScript中有五種空值和假值，分別為false，null，undefined，“”，0。從廣義上來說，這五個(gè)值都是對(duì)應(yīng)數(shù)據(jù)類型的無效值或空值2017-12-12
微信小程序使用slider設(shè)置數(shù)據(jù)值及switch開關(guān)組件功能【附源碼下載】
這篇文章主要介紹了微信小程序使用slider設(shè)置數(shù)據(jù)值及switch開關(guān)組件功能,結(jié)合實(shí)例形式分析了slider組件及switch組件的功能與使用方法,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
純Javascript實(shí)現(xiàn)ping功能的方法
這篇文章主要介紹了純Javascript實(shí)現(xiàn)ping功能的方法,實(shí)例分析了javascript實(shí)現(xiàn)ping功能的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03