(原文地址:https://blog.csdn.net/nongweiyilady/article/details/74244362)
第一步 下载自己喜欢的图标
我用的是阿里巴巴矢量图库,在Iconfont找到自己喜欢的图标,加入购物车,如图:
添加至项目,如图:
下载至本地,如图:
解压,如图:
第二步 转换ttf
因为小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64,然后引用。
- 进入https://transfonter.org/平台
-
点击Add fonts,添加iconfont.ttf
-
勾上如图的选项
-
点击convert
-
下载
第三步 微信小程序使用图标
-
我们把上一步的文件打开,如图,再把里面的stylesheet.css就是我们所需要的,我们打开stylesheet.css:
可以看到font-face的url已经转换为base64格式
-
我们再打开第一步(第一步 下载自己喜欢的图标)中下载的文件即一开始还没转换用download.zip解压的文件,打开里面的iconfont.css
3.把iconfont.css里面圈红的部分(即fontface部分我们不需要啦)复制到stylesheet.css
- 好啦,现在就是怎么用的问题啦,我是把stylesheet.css改了个名字和后缀(注意改后缀噢!!上次忘记了没有改成wxss还是用的css结果一直找不出bug啊摔杯子),把他放进微信小程序的公共文件里面,然后把整个文件import到页面的样式表里
然后就可以用啦,如图!
(ok!遛人啦!)