基于wepy框架小程序iconfont矢量图标使用及坑
2018-03-06 本文已影响2082人
率性的人字拖
简书地址：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
