在微信小程序中引入 Iconfont 阿里巴巴圖標庫

小程序的代碼包不能超過4M，爲了壓縮代碼包的大小，能夠經過第三方連接引入圖標資源

Iconfont 無疑是最經常使用的第三方圖標庫，這裏介紹一下在微信小程序引入 Iconfont 的方法

 

1、下載圖標

首先挑選圖標，添加入庫

而後添加至項目

 

而後在「個人項目」中，將資源文件下載到本地

建議設置爲 font class

 

2、在項目中引入資源

在小程序項目中建一個 iconfont.wxss

在下載的資源文件中有一個 iconfont.css，複製文件中全部代碼，粘貼到 iconfont.wxss 中

而後在 app.wxss 中引入

/**app.wxss**/
@import 'styles/iconfont.wxss';

這時 font-face 中引入的資源文件仍是本地路徑

 

3、將資源路徑改成外鏈

在「個人項目」中，將圖標格式設爲 Unicode，而後「查看在線連接」

複製生成的代碼

粘貼到 iconfont.wxss 中，替換掉本來的 font-face

保存以後便可正常使用