基于wepy框架小程序iconfont矢量图标使用及坑

简书地址：https://www.jianshu.com/p/67bbe4d95a85

阿里巴巴矢量图标库官网：http://iconfont.cn/

以下操作，默认为已经登录。

搜索自己需要的图标，比如搜索“首页”

选中一个你需要的图标，加入购物车，如下图：

这时，右上角会出现红色提示

点击红色提示位置的购物车：

点击“添加至项目”

没有项目的话，点击右边的“+”添加项目

添加成功后，如下图：

点击

将代码复制到icon.less文件下（创建过程不再叙述）

点击“Font class”

随后点击“下载至本地”，下载完成之后，解压。

找到并打开iconfont.css文件，复制以下内容至icon.less内。

最终呈现结果

在要使用icon-home图标的地方引用（前面iconfont 为固定写法）

此时可能会出现下图效果：

出现这样的情况，退出编译器（我用的webstorm），重新打开，如果还是不行，再将微信开发者工具关闭，再重新打开。就可以正确显示了，效果如下：

参考：

http://blog.csdn.net/m0_38082783/article/details/78873053

https://www.cnblogs.com/hjvsdr/p/6639649.html

https://zhuanlan.zhihu.com/p/27607422

https://www.jianshu.com/p/90da43965899