在微信小程序中引入 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

保存以后便可正常使用