阿里矢量图标iconfont在微信小程序的使用
第一步:进入官网: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
第二步找到自己需要的图标,添加至购物车,如下图
第三步.进入购物车中查看
这是已添加成功的:
点击确定进入到该项目中
第四步:下载至本地
第五步:解压 会得到类似于该文件名的文件夹 font_2003460_ffwtix36mni
点进去的目录结构:
第六步:我们一共需要五个物件,就是上面我选中的五个,其它的都是没用的,接着,新建一个文件夹,名字如:iconfont,将这五个文件放进去,接着将后缀为.css的文件改为后缀为wxss适用于微信小程序的文件格式
第七部:将该iconfont文件夹拷贝至你当前的微信小程序项目的根目录,与app.js同级
第八部:在app.wxss文件中全局引入
第九步:打开iconfont.wxss文件,结构如下
第十步:使用,通过class 的方式 (iconfont是必加)
微信小城上使用iconfont的方式已完成,
如果我们需要更换图标的颜色,不需要去官网重新下载了,只需要将该标签的color更改即可
如
至于在原有的图标上再添加新的图标,不需要替换文件,操作过程还是和上方的一样,只是将iconfont.css文件的内容拷贝至当前iconfont.wxss文件中即可
还是不理解的可以联系我