微信小程序引用iconfont圖標(biāo)的方法
最近在研究微信小程序，自己寫demo的時(shí)候想要引用巴里巴巴圖標(biāo)庫(kù)的圖標(biāo)，于是：
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont";
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
這是往常的寫法，但是發(fā)現(xiàn)這樣的寫法要報(bào)錯(cuò)，后來(lái)查了一下，發(fā)現(xiàn)小程序的wxss文件的font-face的url不接受http地址作為參數(shù),但可以接受base64,因此需將字體文件下載后,轉(zhuǎn)換為base64，然后引用。
方法：
在阿里巴巴圖標(biāo)庫(kù)下載下來(lái)以后，將iconfont.ttf轉(zhuǎn)換即可。轉(zhuǎn)換地址：https://transfonter.org/
這里貼一個(gè)簡(jiǎn)單的步驟：
轉(zhuǎn)換后的目錄：
將css文件在外部引入所要用的.wxss文件中即可（@import ‘../../lib/style/lib.wxss';）
最后，就可以使用啦：
.icon:after{
font-family: 'iconfont';
font-weight: 500;
font-style: normal;
content: '\e698;'
}
總結(jié)
以上所述是小編給大家介紹的微信小程序引用iconfont圖標(biāo)的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了JavaScript缺少insertAfter解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
html+javascript+bootstrap實(shí)現(xiàn)層級(jí)多選框全層全選和多選功能
想做一個(gè)先按層級(jí)排序并可以多選的功能，首先傾向于用多層標(biāo)簽式的，直接選定加在文本域里，接下來(lái)通過(guò)本文給大家介紹html+javascript+bootstrap實(shí)現(xiàn)層級(jí)多選框全層全選和多選功能，需要的朋友參考下2017-03-03
最近在學(xué)習(xí)javascript中遇到了一些困難，比如冒泡和捕獲，很多次被提到，但又不知究竟應(yīng)用在何處。找到了一些好文章解惑，在這里分享給大家。2015-05-05
這篇文章主要介紹了js文本框跑馬燈效果，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
解析dom中的children對(duì)象數(shù)組元素firstChild,lastChild的使用
以下是對(duì)dom中的children對(duì)象數(shù)組元素firstChild,lastChild的使用進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以參考下2013-07-07
下面小編就為大家?guī)?lái)一篇JS比較兩個(gè)數(shù)值的大小實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
微信小程序點(diǎn)擊列表跳轉(zhuǎn)到對(duì)應(yīng)詳情頁(yè)過(guò)程解析
這篇文章主要介紹了微信小程序點(diǎn)擊列表跳轉(zhuǎn)到對(duì)應(yīng)詳情頁(yè)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了js中斷 forEach 循環(huán)的幾種方法,主要方法還是通過(guò)其它方式代替 forEach 循環(huán)的中斷,只有方法4 使用 try-catch 結(jié)構(gòu)是實(shí)際意義上中斷 forEach 循環(huán),需要的朋友可以參考下2023-10-10
js實(shí)現(xiàn)驗(yàn)證碼干擾(動(dòng)態(tài))
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)驗(yàn)證碼干擾，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
JS解決iframe之間通信和自適應(yīng)高度的問(wèn)題
關(guān)于iframe之間的通信問(wèn)題與自適應(yīng)高度問(wèn)題網(wǎng)上有很多，那么這篇文章小編也和大家一起來(lái)談?wù)刬frame之間通信問(wèn)題及iframe自適應(yīng)高度問(wèn)題，有需要的可以參考借鑒。2016-08-08