腾讯tdesign-miniprogram使用iconfront自定义图标实操

TDesign 微信小程序组件库地址
官方文档:
TDesign: https://tdesign.tencent.com/m...
GitHub: https://github.com/Tencent/td...
阿里巴巴Iconfont 图标库地址: https://www.iconfont.cn/

1、iconfont选择自己喜欢的图标添加到购物车

2、图标选择完成之后,将选择的图标添加到项目

如果是彩色图标的话,一个项目最多只能选择40个图标

3、设置项目,生成在线CSS文件

设置Font Family 和 FontClass项目设置完成点击保存

打开在线CSS在线链接打开后,全选复制,然后在小程序项目中新建一个文件,例如iconfont.wxss然后将复制的内容粘贴到文件中保存

4、核对文件

wxss文件注意核对上图中标注的内容是否一致,如果不一致必须修改成一致内容

5、使用

使用参照TDesign Icon文档即可:TDesign (tencent.com)如下代码中,保证prefix为图标 wxss文件中的font-family即可