阿里矢量图标iconfont在微信小程序的使用

							阿里矢量图标iconfont在微信小程序的使用

第一步:进入官网: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

第二步找到自己需要的图标,添加至购物车,如下图
iconfont添加图标至项目

第三步.进入购物车中查看
阿里矢量图标购物车
这是已添加成功的:
点击确定进入到该项目中
在这里插入图片描述
第四步:下载至本地
阿里矢量图标下载至本地
第五步:解压 会得到类似于该文件名的文件夹 font_2003460_ffwtix36mni
点进去的目录结构:
阿里矢量图标库
第六步:我们一共需要五个物件,就是上面我选中的五个,其它的都是没用的,接着,新建一个文件夹,名字如:iconfont,将这五个文件放进去,接着将后缀为.css的文件改为后缀为wxss适用于微信小程序的文件格式

第七部:将该iconfont文件夹拷贝至你当前的微信小程序项目的根目录,与app.js同级
iconfont微信小程序使用

第八部:在app.wxss文件中全局引入
微信小程序引入样式文件的方式
第九步:打开iconfont.wxss文件,结构如下
在这里插入图片描述
第十步:使用,通过class 的方式 (iconfont是必加)
iconfont在小程序上的使用
在这里插入图片描述
微信小城上使用iconfont的方式已完成,

如果我们需要更换图标的颜色,不需要去官网重新下载了,只需要将该标签的color更改即可

在这里插入图片描述

至于在原有的图标上再添加新的图标,不需要替换文件,操作过程还是和上方的一样,只是将iconfont.css文件的内容拷贝至当前iconfont.wxss文件中即可

还是不理解的可以联系我

猜你喜欢

转载自blog.csdn.net/weixin_46972614/article/details/107974526
今日推荐