微信小程序项目中使用iconfont步骤流程(Font class方式)

本文记录一下在小程序项目中使用iconfont-阿里巴巴矢量图标库的步骤流程,忘了时候可以看看

第一步,访问网站并登录

网站地址:https://www.iconfont.cn/
登录(注册)略过...

第二步,搜索所需图标,并加入购物车

图一:
微信小程序项目中使用iconfont步骤流程(Font class方式)_第1张图片

图二:
微信小程序项目中使用iconfont步骤流程(Font class方式)_第2张图片

图三:
微信小程序项目中使用iconfont步骤流程(Font class方式)_第3张图片

图四:
微信小程序项目中使用iconfont步骤流程(Font class方式)_第4张图片

第三步,选择Font class形式,并生成代码

图一:
微信小程序项目中使用iconfont步骤流程(Font class方式)_第5张图片

图二:
微信小程序项目中使用iconfont步骤流程(Font class方式)_第6张图片

图三:
微信小程序项目中使用iconfont步骤流程(Font class方式)_第7张图片

第四步,将生成的代码粘贴到文件目录中去

微信小程序项目中使用iconfont步骤流程(Font class方式)_第8张图片

第五步,全局引入图标样式代码

微信小程序项目中使用iconfont步骤流程(Font class方式)_第9张图片

第六步,使用即可

图一使用:
微信小程序项目中使用iconfont步骤流程(Font class方式)_第10张图片

图二效果图:
image.png

注意,图标的名字是在阿里iconfont那边,如下图:
微信小程序项目中使用iconfont步骤流程(Font class方式)_第11张图片

你可能感兴趣的:(微信小程序iconfont)