基于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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容