微信小程序使用字体图标的方法iconfont

一. 先到阿里巴巴矢量图标库,搜索你想要的图标,然后添加入库。

微信小程序使用字体图标的方法iconfont_第1张图片
将使用到的图标加入购物车
微信小程序使用字体图标的方法iconfont_第2张图片
点击购物车
微信小程序使用字体图标的方法iconfont_第3张图片
下载代码
微信小程序使用字体图标的方法iconfont_第4张图片
获取字体库文件

二. 到这个平台 https://transfonter.org,把刚才下载的ttf字体文件转化成base64格式

微信小程序使用字体图标的方法iconfont_第5张图片
将ttf字体文件转成base64格式
微信小程序使用字体图标的方法iconfont_第6张图片
点击Download下载下来
微信小程序使用字体图标的方法iconfont_第7张图片
下载后解压下来
微信小程序使用字体图标的方法iconfont_第8张图片
打开stylesheet.css文件,复制以上内容
微信小程序使用字体图标的方法iconfont_第9张图片
把刚刚复制的代码粘贴到wxss文件中
微信小程序使用字体图标的方法iconfont_第10张图片
打开之前在字体库上下载下来的压缩包,找到iconfont.css文件,打开它
微信小程序使用字体图标的方法iconfont_第11张图片
复制这些内容到wxss文件中
微信小程序使用字体图标的方法iconfont_第12张图片
将上一步复制的内容粘贴到wxss处
微信小程序使用字体图标的方法iconfont_第13张图片
在wxml中使用iconfont字体库
最终效果

你可能感兴趣的:(微信小程序使用字体图标的方法iconfont)