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

本文记录一下在小程序项目中使用iconfont-阿里巴巴矢量图标库的步骤流程,忘了时候可以看看
第一步,访问网站并登录
网站地址:https://www.iconfont.cn/
登录(注册)略过...
第二步,搜索所需图标,并加入购物车
图一:
微信小程序项目中使用iconfont步骤流程(Font class方式)
文章图片

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

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

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

第三步,选择Font class形式,并生成代码
图一:
微信小程序项目中使用iconfont步骤流程(Font class方式)
文章图片

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

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

第四步,将生成的代码粘贴到文件目录中去
【微信小程序项目中使用iconfont步骤流程(Font class方式)】微信小程序项目中使用iconfont步骤流程(Font class方式)
文章图片

第五步,全局引入图标样式代码
微信小程序项目中使用iconfont步骤流程(Font class方式)
文章图片

第六步,使用即可
图一使用:
微信小程序项目中使用iconfont步骤流程(Font class方式)
文章图片

图二效果图:
微信小程序项目中使用iconfont步骤流程(Font class方式)
文章图片

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

    推荐阅读