在微信小程序中使用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)文章
JS實現(xiàn)無縫循環(huán)marquee滾動效果
這篇文章主要為大家詳細介紹了JS實現(xiàn)無縫循環(huán)marquee滾動效果，兼容IE, FireFox, Chrome，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細介紹了JavaScript封裝彈框插件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
js前臺分頁顯示后端JAVA數(shù)據(jù)響應(yīng)
js前臺分頁顯示使用jquery1.8.7框架，本文目的主要給那些剛?cè)胄熊浖_發(fā)，喜歡這也看看，程序需要有投入才有收獲感興趣的你可不要錯過了哈，希望可以幫助到你2013-03-03
本文主要介紹了圖解Javascript——作用域、作用域鏈、閉包等知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
前天老師布置了一道思考題，用Javascript編寫可以緩慢彈出收縮的層，折騰了好幾個小時，總算寫出效果.2009-10-10
CKEditor 4.4.1 添加代碼高亮顯示插件功能教程【使用官方推薦Code Snippet插件】
這篇文章主要介紹了CKEditor 4.4.1 添加代碼高亮顯示插件功能,涉及ckeditor使用官方推薦Code Snippet插件的相關(guān)操作布局與使用注意事項,需要的朋友可以參考下2019-06-06
詳解微信小程序-掃一掃 wx.scanCode() 掃碼大變身
這篇文章主要介紹了微信小程序-掃一掃wx.scanCode() 掃碼大變身，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了js替換字符串中指定位置的字符，本文通過兩種方法實例代碼相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
layui實現(xiàn)根據(jù)table數(shù)據(jù)判斷按鈕顯示情況的方法
今天小編就為大家分享一篇layui實現(xiàn)根據(jù)table數(shù)據(jù)判斷按鈕顯示情況的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了使用js繪制幾何圖形的方法的系列文章，本文主要講訴正弦曲線的繪制方法,需要的朋友可以參考下2015-01-01