微信小程序使用阿里字体图标

前言

为了美化微信小程序,可以使用适当的图标来美化页面,体验更好。
阿里字体图标库提供了丰富的字体,各种场景下项目中所需要字体几乎都能找到。

微信小程序中设置元素的背景图片不能使用本地图片,本地资源无法通过WXSS获取,background-img可以使用网络图片或者base64,或者使用image标签,所以不能直接下载阿里字体图标库的图片设置为背景图片,可以将下载的图片转成字体文件使用。

使用

1. 下载字体

下载字体文件

2. 解压转成base64文件

下载字体文件,解压缩后将.ttf文件转化,transfonter
转换成base64字体文件

3. 拷贝字体文件至小程序

将下载好的文件夹中stylesheet.css样式表中的内容拷贝, 粘贴至小程序的wxss文件中,即可引用该iconfont字体图标.

4. 引用字体文件

小程序只能识别wxss为后缀的css文件,不能识别.css文件。
@import "/assets/iconfont/iconfont.wxss

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×