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

1. 进入https://www.iconfont.cn/官网，

2. 搜索目标图标,图标类型为“单色图标”
   

3. 将需要的图标添加到购物车，点击购物车将图标添加至相应的目标项目中
   

4. 打开目标项目，下载代码至本地(另外:下载Unicode格式)
   

5. 将下载的文件进行解压，解压后得到如图所示文件
   

6. 打开iconfont.css文件,删除文件中src属性的内容
   

7. 回到iconfont网站，点击复制代码
   

8. 将复制的代码写进@font-face中并保存，如图：
   

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

10. 将iconfont.css文件放入iconfont文件夹下，并将iconfont.css文件更名为iconfont.wxss

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

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

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

或者

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

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

13. 最终效果如图
    

14. 修改图标颜色,wxss部分代码如下:

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

效果图：

15. 修改图标大小

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