TDesign引入阿里Iconfont图标库

1、打开 iconfont,https://www.iconfont.cn/,登录,创建个项目

2、搜索图标,选择图标,添加到购物车

3、选好之后,点击顶部右侧购物车图标,将图标添加进项目,没有项目可以新建

4、先进行项目配置,此时需注意Font Family 和 FontClass需要与小程序中配置一样,否则访问不到,参考[Icon 图标] 引入iconfont自定义图标不显示 · Issue #1162 · Tencent/tdesign-miniprogram · GitHub

项目设置如下:

项目设置好之后,点击生成/更新代码,打开代码,全选复制内容

5、在小程序项目中新建个xxxx.wxss文件(如iconfont.wxss),路径随意,根据自己代码习惯,建议放外层;将复制内容粘贴到文件中保存。此时核对文件三一致

6、在 app.wxss中引入刚才的文件

7、在页面中使用,注意 prefix 对应Font Family

相关推荐
卡姿兰大眼猫&13 天前
TDesign 步骤条用法
tdesign
sunly_17 天前
TDesign:TDAlertDialog消息确认弹窗
tdesign
sunly_17 天前
TDesign:Switch开关
数据库·mysql·tdesign
小林学习编程1 个月前
TDesign了解及使用
tdesign
天天打码2 个月前
TDesign腾讯高保真Axure RP中后台交互模板及元件组件库
交互·axure·tdesign
包淼淼3 个月前
微信小程序自定义navigationBar顶部导航栏(背景图片)适配所有机型,使用tdesign-miniprogram t-navbar设置背景图片
微信小程序·小程序·tdesign
Hsu yiqi5 个月前
TDesign组件库日常应用的一些注意事项
tdesign
xiansibao6 个月前
tdesign和vue的子组件关闭是,父组件执行方法
前端·vue.js·tdesign
穿城大饼6 个月前
TDesign环境搭建-后台模板的安装和使用-构建web管理端后台系统
前端·tdesign