阿里巴巴图标库彩色图标使用

1. 把选择的图标加入购物车

2.解压下载好的图标包，进入解压的文件夹

3. 在解压好的文件夹内打开终端

4. 在打开的终端内输入代码
输入命令行：npm install -g iconfont-tools

命令结束后，运行：iconfont-tools 出现如下图所示的内容，按图示输入文件名即可（或者一直回车）
1
2
3

4.输入命令后会出现一个新的文件夹
1、以上命令运行结束后，会在目录中生成 iconfont-weapp 文件夹：

5. 引入图标文件
1、打开uniapp，把处理好的图标文件引入到自己的项目中，进入图标文件夹，里面的 iconfont-weapp-icon.css ，我们需要在 APP.vue 中引入：

@import './static/iconfont-weapp/iconfont-weapp-icon.css';
1
记住要在 style里面引入，因为这是一个css文件，不要引入错了

2、在你想要使用图标的页面使用就行了。如下代码

<view class="t-icon iconbanqianjihua"></view>
1
class的属性就是你选择图标的名字直接复制替换下就好了。

6.注意事项
因为处理完的图标属于背景图所以记得要在他的CSS属性上加上一个 background-repeat:no-repeat; 的CSS属性不然的话你使用的图标会平铺满整个屏幕
————————————————
版权声明：本文为CSDN博主「老张代码」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45721912/article/details/117354334