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