概述

在小程序中經(jīng)常會用到各種各樣的圖標，如果這些圖標都使用圖片的話，將會大大增加小程序打包后的體積，而小程序限制代碼最大2MB，分包加載4MB，所以為了縮小體積，我們可以使用阿里巴巴矢量圖標庫

準備

選好圖標并加入項目后，選擇 Font class，然后生成在線代碼，選中后右鍵轉到（chrome），在新的標簽中打開此鏈接以后，Ctrl+A 全選整個頁面，然后 Ctrl+C 復制。

生成在線鏈接

使用

/在小程序中新建一個 wxss 文件，我這里建的是 /icon/icon.wxss，然后打開這個文件，將剛剛復制的代碼 Ctrl+V 粘貼進去，然后 Ctrl+S 保存。

粘貼進wxss文件中

然后打開 app.wxss ，新增下面一句代碼后保存即可。

@import "/icon/icon.wxss";

測試

現(xiàn)在，我們來測試一下，在 index.wxml 中加入如下代碼

測試代碼

然后編譯以后，發(fā)現(xiàn)頁面中正常顯示了我們需要的圖標

圖標

我們對比一下體積，icon.wxss文件只有3.69KB的大小，而下載下來四個圖標的png圖片加起來就有22.3KB那么大，

所以說使用字體圖標還是挺省空間的，而且還是矢量放大不失真。

icon.wxss

四張圖片

本篇教程到此結束，可能有的人會問，為什么不直接在app.wxss中import在線鏈接，而是要復制粘貼這么麻煩？這樣的做法我之前也做過，但小程序貌似還不支持引入在線的鏈接，會報“File not found ”，即使放到自己的服務器上，并改成 wxss 也是如此