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

相关推荐
杨天天.1 个月前
微信小程序原生,tdesign时间选择器,t-date-time-picker封装成组件,开始时间结束时间
微信小程序·小程序·tdesign
shadowflies1 个月前
组件库TDesign的表格<t-table>的使用,行列合并以及嵌入插槽实现图标展示,附踩坑
前端·javascript·vue.js·vue·tdesign
卡姿兰大眼猫&2 个月前
TDesign 步骤条用法
tdesign
sunly_2 个月前
TDesign:TDAlertDialog消息确认弹窗
tdesign
sunly_2 个月前
TDesign:Switch开关
数据库·mysql·tdesign
小林学习编程3 个月前
TDesign了解及使用
tdesign
天天打码4 个月前
TDesign腾讯高保真Axure RP中后台交互模板及元件组件库
交互·axure·tdesign
包淼淼4 个月前
微信小程序自定义navigationBar顶部导航栏(背景图片)适配所有机型,使用tdesign-miniprogram t-navbar设置背景图片
微信小程序·小程序·tdesign
Hsu yiqi7 个月前
TDesign组件库日常应用的一些注意事项
tdesign