微信小程序使用色彩字体图标（笔录）

微信小程序怎么使用色彩字体图标

1. 在阿里巴巴矢量图标库选择对应图标，添加到自己的项目中，下载到本地
   

2. 通过npm全局导入iconfont-tools工具，语法：npm i -g iconfont-tools

3. 再iconfont-tools // 生成小程序专用文件（可以取名字也可以使用默认名称，使用默认名称就一直enter）

4. 得到如下文件目录结构，iconfont-weapp就是小程序色彩图标文件
   

5. 把iconfont-weapp中css文件拷贝到项目中，在app.vue中全局导入iconfont-weapp文件中的iconfont-weapp-icon.css样式文件
   @import url('./static/font/iconfont-weapp/iconfont-weapp-icon.css'); //彩色图标

6. 使用

<text class="t-icon t-icon-jiagepaixu" style="width: 20rpx;height: 20rpx;" />

不能通过font-size设置大小，只能使用width、height设置图标大小
t-icon是iconfont-weapp-icon.css中定义的初始样式（名字肯定可以改了），t-icon-jiagepaixu中后面一截可以在这里和iconfont-weapp-icon.css中查看，（只有iconfont-weapp-icon.css中有的才可以使用为色彩图标，demo_index.html只是参考）

效果图

微信小程序使用字体图标不是难点，写这个文章主要是做个笔记，怕以后忘记