前言
日常前端頁面的開發(fā)中偶爾會(huì)使用到矢量圖標(biāo),常用以iconfont矢量圖標(biāo)庫為主莺褒,因其使用快捷且方便
但在小程序?qū)ξ募袷街写_發(fā)現(xiàn)不能直接引用掩缓,需要一些額外的步驟,本文就此作簡要說明
(iconfont的基本使用官網(wǎng)有示例遵岩,此處不作過多說明)
IconFont官網(wǎng)地址
小程序?qū)ξ募母袷接兴拗颇憷保瑥膇confont下載過來的字體包無法直接引用,需要對(duì)其中的?ttf?文件進(jìn)行轉(zhuǎn)換
在線轉(zhuǎn)換地址:transfonter.org/
點(diǎn)擊 'Add fonts'上傳 ttf 文件尘执,選擇Base64 encode 并勾選TTF格式舍哄,點(diǎn)擊Convert即開始轉(zhuǎn)換
轉(zhuǎn)換完成后,點(diǎn)擊Download下載到本地并解壓
完成解壓后誊锭,將解壓內(nèi)容中stylesheet.css的文件內(nèi)容復(fù)制到小程序app.wxss中表悬,如:
復(fù)制iconfont字體包中iconfont.css的文件內(nèi)容(第二欄起)到小程序app.wxss中,如:
按需引用
<span class="iconfont iconfont-xxxx"></span>