携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情
iconfont是一个矢量图标库，一般情况下，项目中会有很多icon图片，这些icon如果放在项目本地，会让项目的大小增加，并且不容易进行管理维护，后期如果要进行图标的更换，还需要在项目中手动替换图片，引入iconfont后，只需要引入项目对应的iconfont链接即可（h5项目中，小程序项目中需复制样式到项目中使用），这样后期更换图标只需要更换引用链接。另外，iconfont是矢量图，在移动端项目中适配更加友好，可以根据适配设置的fontSize自动适应大小，不会在有些手机上出现图片模糊的情况。
在小程序当中，小程序项目代码包有大小的限制，在不分包的情况下，小程序项目代码包不能超过4M，如果放置的图片太多，超过总包大小限制，发布的时候将发不上去。所以，项目中icon类的图片通过iconfont来进行引入比较合适。
小程序项目中引入iconfont
在iconfont官网中，下载对应项目的iconfont文件，在文件中找到iconfont.css文件，此文件就是iconfont项目中对应所有的icon矢量图片的样式，文件内容大致如下：
可以看到iconfont生成的样式文件中，每个图标都有一个对应的class名。像选择图标，对应的class名就是.icon-choose，在后续的使用中，使用这个class名就可以了。
将上述iconfont.css的内容复制到小程序项目中自己建的iconfont.wxss文件中。然后在入口app.wxss中全局引入iconfont.wxss文件即可。
/**app.wxss**/
@import '/iconfont/iconfont.wxss';
小程序项目中使用iconfont
项目引入iconfont文件后，在相应页面的代码中使用的时候直接在元素的class中加入iconfont和icon对应的名字即可，再根据设计稿设置下fontSize大小即可。
<view class="iconfont icon-choose"></view>
