微信小程序使用阿里icon图标库and彩色图标

2021-09-03

1.普通使用阿里icon 日常开发中会使用到很多图标。一般我们使用阿里icon；下面就记录一下;

文章图片
image.png
1.选择一个自己需要的icon 加入购物车；
在右上角点击购物车按钮

文章图片
image.png
2.再次点击添加至项目

文章图片
image.png
3.点击下载至本地;
然后解压压缩包:

文章图片
image.png
4.将这个文件里面的代码复制出来；
新建一个 ifonfont.wxss文件，吧刚才复制出来的代码粘贴进去；

文章图片
image.png
5.还需要做的是。在我们app.wxss里面引入；

文章图片
image.png
就可以啦；
怎么使用呢就是在wxml里面

就可以啦~
2.使用彩色的icon 使用了普通颜色的icon ，但是还有彩色的一些图标使用就有一点细微的差别了；但是也很简单；
需要使用一个第三方库iconfont-tools
首先执行命令

npm i -g iconfont-tools

然后到我们刚才下载的文件下面：

微信小程序使用阿里icon图标库and彩色图标

文章图片
image.png 切换到这个目录下面；

cd project/asset/font_hiytajitqeu // 进入图标文件所在文件夹

然后执行

iconfont-tools// 生成小程序专用文件

控制界面会是这样；

微信小程序使用阿里icon图标库and彩色图标

文章图片
image.png
这样一顿操作后会得到一个文件夹：

微信小程序使用阿里icon图标库and彩色图标

文章图片
image.png 右侧的iconfont-weapp-icon.wxss 就是我们彩色的图标样式啦；
和上面一样在app.js中引入就可以了；这边介绍了；
tip: 需要注意的是使用这个图标就不再是上面的代码了

微信小程序使用阿里icon图标库and彩色图标

文章图片
image.png 需要修改一下下

就要就结束了~

【微信小程序使用阿里icon图标库and彩色图标】
自己无聊写的小程序欢迎扫码使用提BUG~

微信小程序使用阿里icon图标库and彩色图标

文章图片
gh_af88ca3ac9c4_430.jpg

推荐阅读

上一篇：越是想说的话越不能说！

下一篇：健身教练学习的最佳年龄（）