微信小程序中使用iconfont自定义字体图标

1、进入阿里巴巴矢量图标库

https://www.iconfont.cn/

2、选择自己的图标,添加到创建的项目中

3.下载至本地,解压后文件如下

4.转换ttf文件,在https://transfonter.org/中转换,上传 iconfont.ttf,.勾选 Family support , Base64 encode, TTF 三个选项, 点击 "Convert" 进行转化, 然后 "Download"


6.解压后找到stylesheet.css把里面的内容(@font-face{})拷贝到 小程序 的app.wxss中, 打开之前在 IconFont 网站中下载的文件,找到iconfont.css,复制.iconfont{}和 带有伪类选择器:before的相关 css 到 app.wxss

你可能感兴趣的:(微信小程序中使用iconfont自定义字体图标)