微信小程序版Vant自定义字体图标Icon样式阿里云图标1.进入阿里图标库搜索想要的图标再点加入购物车2.打开购物车下载源代码3.保存download.zip4.复制iconfont.ttf到小程序项目 /images/icon-ttf/5.打开demo_index.html就能看到自定义图标用法Vant自定义图标如果需要在现有 Icon 的基础上使用更多图标可以引入第三方 iconfont 对应的字体文件和 CSS 文件之后就可以在 Icon 组件中直接使用。例如可以在 app.wxss 文件中引入。复制iconfont.json中的icon样式部份放到my-icon样式后面在前面都加上my-icon-前缀。/* 引入第三方或自定义的字体图标样式 */font-face{font-family:iconfont;src:url(./images/icon-ttf/iconfont.ttf?t1782982543261)format(truetype);}.my-icon{font-family:iconfont;}.my-icon-icon-shangpin:before{content:\e64f;}.my-icon-icon-fuwu:before{content:\eb36;}.my-icon-icon-shangpin1:before{content:\e852;}.my-icon-icon-fuwu1:before{content:\e616;}使用自定义图标!-- 通过 class-prefix 指定类名为 my-icon --van-iconclass-prefixmy-iconnameicon-fuwu1/在其它控件里使用自定义图标指定icon-prefix即可van-grid-itemurl/test/testicon-prefixmy-iconiconicon-fuwuicon-colorDarkCyantext服务/发布可用性经测试 字体文件放小程序项目中开发工具能正常显示图标但发版后真机不能正常显示。解决办法把ttf文件放到后端服务器上如下所示font-face{font-family:iconfont;src:url(https://www.xxxxx.com/statics/icon-ttf/iconfont.ttf?t1782982543261)format(truetype);}这样真机也能正常显示同时也省去了占用小程序空间的问题。但是在安卓手机上这种方法也不行用base64编码解决1.首先进入下载的iconfont.ttf目录用node将iconfont.ttf生成base64码到iconfont_base64.txt文件。node-econst fsrequire(fs);const bfs.readFileSync(iconfont.ttf);console.log(data:font/truetype;charsetutf-8;base64,b.toString(base64))iconfont_base64.txt用写字板打开iconfont_base64.txt文件全选复制全部内容到url()中替换链接内容不能带有回车符。font-face{font-family:iconfont;src: url(data:font/truetype;charsetutf-8;base64,AAEAAAALAIAAAwAwR1NVQiCLJXoAAAE4AAAAVE9TLzI8GU4GAAABjAAAAGBjbWFwqba6ywAAAiwAAAKcZ2x...)format(truetype);}注意如果项目比较大建议先收藏标图再从我的收藏里添加购物车下载源代码或保留好每次下载的图标源码。便于以后添加图标使用。