简介

iconfont是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到 iconfont 平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。在前端中经常会用到各种各样的图标，如果这些图标都使用图片的话，将会大大增加程序打包后的体积，以小程序为例，小程序限制代码最大2MB，分包加载4MB，所以为了缩小体积，我们可以使用阿里巴巴矢量图标库，Font Awesome等。

开始

我们打开阿里图标库官网(https://www.iconfont.cn/)，选择好图片库或者搜一搜，选好图标并加入项目后，选择Font class，再点击生成在线代码，选中在线链接复制后，在新的标签中打开此链接的源码页，Ctrl+A 全选整个页面，然后 Ctrl+C 复制粘贴到记事本（暂存）。

部署

打开小程序开发者工具，在小程序目录中新建一个文件夹创建.wxss文件，在这里我创建的是/common/icon.wxss，然后打开这个文件，将刚刚复制的代码 Ctrl+V 粘贴进去，然后 Ctrl+S 保存。

再打开小程序目录下的app.wxss文件，新增下面一句引入wxss代码后保存即可。
@import "/common/icon.wxss";

测试

然后我们就可以在小程序任意.wxml界面插入以下代码引入，再编译，图标就出来了，如图所示

<!-- 图标测试 -->
<text class="iconfont iconcopyright" style="font-size:60px"></text>
<text class="iconfont iconceshi" style="font-size:60px;"></text>
<text class="iconfont iconceshiliucheng" style="font-size:60px;color:red;"></text>
<!-- 图标测试 -->

总结

通过引入图标的方式，我们对比体积，引入icon.wxss文件只有3.35kb的大小，而下载的图标光一个图片都不止3.35kb。这样下来极大的缩小了图片的占用体积。

tips：
1、图标可以设置style，例如色彩，大小等。
2、目前小程序不能直接在app.wxss中import在线链接，会报“File not found”。