微信小程序里使用阿里巴巴矢量图标

登录 阿里巴巴矢量图标 (https://www.iconfont.cn)

 

选中图标,加入购物车图标

微信小程序里使用阿里巴巴矢量图标

 

下载源代码

微信小程序里使用阿里巴巴矢量图标

 

 解析出来如下文件结构

 

微信小程序里使用阿里巴巴矢量图标

有两种使用方式:

1)不转换成base64的文件

找到 iconfont.css 文件,直接复制出来粘贴在微信小程序的wxss 文件内

微信小程序里使用阿里巴巴矢量图标

再在小程序的wxml 里引用类 

微信小程序里使用阿里巴巴矢量图标

 

2)转换成base64的文件 在线转换 (https://transfonter.org/)

先找到下载的源码中的 iconfont.ttf 文件,导入

 

微信小程序里使用阿里巴巴矢量图标

 

后续引用与1类似

微信小程序里使用阿里巴巴矢量图标

 

微信小程序里使用阿里巴巴矢量图标

上一篇:微信小程序 - 富文本编辑器中图片宽度设置


下一篇:微信小程序上传项目到github