在微信小程序中使用彩色字体图标(Iconfont)

时间:2024-03-05 22:19:03

字体图标的使用相信大家都很熟悉,阿里图标库的官网地址:https://www.iconfont.cn/home/index

一般我们在开发的时候,都是使用iconfont来管理项目里面的图标。但是我们该如何在小程序中使用彩色的字体图标?

 

首先放图:

 

步骤:

1、打开阿里巴巴矢量图标库,将自己需要的彩色图标加入到购物车中:

 2、加入购物车后,下载至本地:

 3、解压文件后,在文件内全局安装iconfont 的字体文件包iconfont-tools(npm i -g iconfont-tools),然后运行iconfont-tools,生成 iconfont-weapp文件:

  4、将生成的iconfont-weapp文件复制到自己的项目中,在要使用彩色字体图标的页面中引入里面的文件:

 

 5、使用彩色字体图标:class=“t-icon t-icon-xxx”

 完成!