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

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

首先全局安装 iconfont-tools

1、先windows+R打开cmd命令窗口
2、输入npm i -g iconfont-tools
微信小程序使用阿里彩色图标_第1张图片
3、下载自己要使用的彩色图标
微信小程序使用阿里彩色图标_第2张图片
在文件中shift+右键 打开powershell窗口
微信小程序使用阿里彩色图标_第3张图片
输入iconfont-tools
微信小程序使用阿里彩色图标_第4张图片
生成文件如下图:
微信小程序使用阿里彩色图标_第5张图片
将图中的iconfont.wxss复制到小程序中 ,并在app.wxss中全局引入iconfont.wxss
微信小程序使用阿里彩色图标_第6张图片

@import "/font/iconfont.wxss";

:使用的时候打开iconfont.wxss看看你的命名 比如我命名iconfont;

因为这个图标实际上是精灵图的形式所以大小用fong-size是无效的 需要直接设置该图标的width和height

微信小程序使用阿里彩色图标_第7张图片


你可能感兴趣的:(微信小程序使用阿里彩色图标)