在开发小程序时，经常遇到图标。因为小程序本身对包的大小有限制，所以在开发的时候图标使用字体图标，避免图片图标使用占用小程序大小。
IconFont（图标字体）是用字体来代替图标、图片文件的方法，通过IconFont可以对图标的大小、颜色等进行控制。微信小程序的wxss文件的font-face的url不接受http地址作为参数，但可以接受base64，需将图标字体文件转换为base64后引用。可以从阿里巴巴图标库（http://www.iconfont.cn/）选择项目所需要的IconFont，并下载至本地。
image.png
字体包下载本地后，解压后把iconfont.css样式文件修改为iconfont.wxss放到项目中。
image.png
wxml页面写法：
<view class="success">
<text class="iconfont icon-chenggonganli"></text>
<view class="success-title">订单支付成功</view>
</view>
wxss页面引入iconfont.wxss文件
@import '../../../icon/iconfont.wxss';
iconfont 属于公共样式
icon-chenggonganli 是图标名称
实际效果图：
image.png
图标还可以根据自己的需求添加渐变，这样效果会好看点。
background: linear-gradient(to right, #e54d42, #f37b1d);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
