微信小程序之如何使用iconfont图标

分类小程序日期10个月前访问615评论0

一、下载iconfont图标

1.进入iconfont,选择要下载的图标,点购物车添加入库

在这里插入图片描述

2. 添加至项目

在这里插入图片描述

3. 下载至本地

在这里插入图片描述

二、如何引入?

1. ttf文件转换base64格式

进入https://transfonter.org/,点击Add fonts选择文件,打开Base64 encodeTTF按钮,然后点击Convert转换。
在这里插入图片描述
点击Download下载
在这里插入图片描述

2.合并样式代码

打开第一次下载的图标文件里iconfont.css文件,除去@font-face 这一段,其他全部复制到第二次下载的stylesheet.css文件中。
在这里插入图片描述

3.在微信开发者工具中使用

打开微信开发者工具,新建font.wxss文件,在app.wxss中引入,将上步得到的样式代码复制进去,就可以使用了。
在这里插入图片描述
在这里插入图片描述

三、成功啦

在这里插入图片描述