眾所周知, 小(xiao)程序(xu)的(de)有一個1M大(da)小(xiao)的(de)限(xian)制. 而優美的(de)界面離不(bu)了各種圖形. 如果將這些圖形集(ji)成到(dao)小(xiao)程序(xu)中(zhong). 其臃腫的(de)體積是讓微信官方不(bu)想接受的(de).

作(zuo)為前(qian)端開發, 阿(a)里(li)給(gei)我早(zao)就了iconfont開源圖(tu)(tu)標(biao)庫. 那能不能把(ba)這些圖(tu)(tu)標(biao)字體(ti)引入到小程序中. 讓(rang)水(shui)火不容的AT來一次擁抱.

說干就干.

從(cong)iconfont中(zhong)下載iconfont源(yuan)文件

//iconfont.cn/

我們加幾個圖(tu)標(biao)字體. 單色的. 多色的.,最后得到的圖(tu)標(biao)

將iconfont資源下載到本(ben)地備(bei)用. 下載完(wan)壓縮包內容如下.

打(da)開新(xin)建小程(cheng)序(xu)

直接(jie)選用QuickStart建(jian)立一(yi)個(ge)默認(ren)程序

加入iconfont到小程序(xu)項目中

建立文(wen)(wen)件夾(jia) /assets/iconfont/ , 將解壓(ya)出來的iconfont文(wen)(wen)件均放(fang)入(ru)此文(wen)(wen)件夾(jia). (測試時都放(fang)入(ru). 教程完(wan)成后. 我們要留下最精(jing)簡的文(wen)(wen)件)

將iconfont引(yin)入小程(cheng)序中

將iconfont.css加入(ru)

在全(quan)局樣(yang)式 app.wxss中(zhong), 第一行加(jia)入代碼

@import "/assets/iconfont/iconfont";

引入時會(hui)報錯"File not found: /assets/iconfont/iconfont", 這是小程(cheng)序只(zhi)認(ren)識以wxss為后綴的(de)css文件. 標準的(de).css文件是不能識別的(de).

將`

/assets/iconfont/iconfont.css改名為

iconfont.wxss

`即(ji)可(ke)解決(jue).

在/pages/index/index.wxml中加入iconfont的調用代碼(ma)

修改 代碼段的內容(rong)

1.  
2. <view class="usermotto">
3. <view>
4. <text class="name">窗口(彩色)</text>
5. FontClass方式
6. <i class="icon iconfont icon-chuangkou"></i>
7. </view>
8. <view>
9. <text>窗口(單色)</text>
10. FontClass方式
11. <i class="icon iconfont icon-yonghu_qiandao"></i>
12. </view>

通過加入(ru)iconfont.css方式(shi), 可以(yi)使用單(dan)色(se)的(de)iconfont字體.不能(neng)使用彩色(se)的(de).

加(jia)入如(ru)下代(dai)碼.

1. <i class="icon iconfont icon-chuangkou"></i>

預覽小程序,在ANDROID和ios上的顯示(shi)

android( Nubia Z17mini)

顯示效果一致.

精簡iconfont

刪除/assert/iconfont/下(xia)除iconfont.wxss以外的所有有文件(jian). 僅保留(liu)iconfont.wxss

修改(gai)iconfont.wxss

1.  
2. @font-face {font-family: "iconfont";
3. src: url('data:application/x-font-woff; <<此處省略>> AAAAA==') format('woff');
4.  
5. }

<< 后面保持(chi)不變>>

搞(gao)定,經測試在android 和 ios下表現一致(zhi).

如何更新圖(tu)標(biao)

在iconfont.cn中添(tian)加圖標,并(bing)下載iconfont壓縮包.

復(fu)制壓縮包內(nei)文件iconfont.css的內(nei)容(rong)到, 小程序項目中(zhong)(zhong)/assets/iconfont/iconfont.wxss中(zhong)(zhong), 刪除不需(xu)要的行(參照精簡iconfont中(zhong)(zhong)的wxss). 即可.

再給(gei)你(ni)一個(ge)懶(lan)人黑(hei)科(ke)技把. 直(zhi)接復制`

iconfont.css到

iconfont.wxss

`中

,不刪除任何(he)內容, 小程序依然表現良好.

總結

簡單說三步搞定iconfont在小程序(xu)中的使(shi)用(yong)

1. 在iconfont.cn中(zhong)下載圖(tu)標庫, 直接將其中(zhong)的iconfont.css復制(zhi)到小(xiao)程(cheng)序目錄中(zhong),并將擴展名改(gai)為wxss.

2. 在使用時(shi)在對(dui)應的(de)樣(yang)式文件wxss中(zhong)加(jia)入一行(xing)引用`

@import "/path/to/iconfont";`,

可以在wxml中使用了