小程序中使用iconFont
前言:純屬個人經(jīng)驗,仁者見仁智者見智杉辙。如有不正模捂,請指出必當(dāng)虛心聆聽。話不多說奏瞬,上過程枫绅。
1, 首先在阿里巴巴矢量圖標(biāo)庫中選擇自己需要到的素材,下載至本地硼端。如下圖示:
圖標(biāo)下載
2, 下載后的文件格式如下并淋,選擇其中的iconfont.css
選擇iconfont.css
3, 將選中的css復(fù)制至你的小程序項目中,并按照小程序的文本格式將其更名為iconfont.wxss珍昨。新建style文件夾存放一些共用的樣式之類县耽。見下圖:
在小程序中的icon font文件
4, 回到阿里巴巴矢量圖標(biāo)庫剛剛下載圖標(biāo)的項目中選擇unicode并查看在線代碼如下所示:
生成unicode代碼
5,復(fù)制生成的在線代碼替換iconfont.wxss中的頂部區(qū)域如下所示:
替換文件中的@font-face
app.wxss中引入
項目中應(yīng)用
至此,小程序中使用iconfont完成兄春。其中不足還望指出澎剥。或有其它更加優(yōu)雅的做法亦希望能不吝賜教赶舆。