微信小程序使用阿里ICON图标引入方法

在网上找了很多办法，终于成功了，能够引入带多种色彩的图标，在此总结一下

1. 添加全部图标，去阿里图标库将需要的图标加入购物车添加至项目

   

2. 下载，点击下载至本地，得到一个压缩包，进行解压

   

3. 去 Transfonter 网站 开启Family support 和Base64 encode 后，点击add去选择解压得到的iconfont.ttf文件，之后选择concert，再download，解压得到下图所示，将stylesheet.css修改为stylesheet.wxss，引入到微信小程序的static/aliIcon（自己建的文件目录，但时候在需要引入图标的地方使用）下

   

4. 在微信小程序的命令栏输入npm install -g iconfont-tools，下载完成后，cd切换到从阿里下载解压缩的文件下，再执行iconfont-tools一直回车至结束，会得到iconfont-weapp的文件夹，其中的iconfont-weapp-icon.css一会有用

   

5. 将iconfont.css修改为iconfont.wxss引入到微信小程序static/aliIcon下

   

6. 替换（两个部分），第一在阿里图标官网Unicode下生成在线链接复制代码，替换掉iconfont.wxss中@font-face的部分；第二将iconfont-weapp-icon.css中的内容复制，替换掉iconfont.wxss中.iconfont之后的内容​​​​​​

7. 引入，在需要用到图标的页面的index.wxss中引入iconfont.wxss；在index.wxml中引入图标，注意class的内容为t-icon iconClassName与iconfont.wxss中的类名保持一致

8. 修改大小，在iconfont.wxss中可以修改图标的大小

成功了，给自己加个鸡腿吧~~~