微信小程序引入iconfont单色图标实例(Font class方式)

1. 进入https://www.iconfont.cn/官网，
2. 搜索目标图标,图标类型为“单色图标”
   
3. 将需要的图标添加到购物车，点击购物车将图标添加至相应的目标项目中

4. 在小程序项目文件中建一个新的文件夹，命名为iconfont；

5. 在iconfont文件夹下新建一个wxss文件，并命名为iconfont.wxss
6. 回到iconfont网站，点击复制代码(j即:复制生成的CSS的链接地址)

7. 打开浏览器，输入上一步骤中的链接地址

8. 将网页中的内容复制到iconfont.wxss文件中

9.在小程序app.wxss中引入iconfont.wxss,如图

10. 在页面中使用,wxml部分代码如下：

<text class="iconfont icon-图标名"></text>

或者

<i class="iconfont icon-图标名"></i>

eg:<i class="iconfont icon-kache"></i>

11. 最终效果如图
    
12. 修改图标颜色,wxss部分代码如下

<text class="iconfont icon-图标名" style="color: red;"></text>

效果图：

13. 修改图标大小

<text class="iconfont icon-图标名" style="font-size:30px;"></text>