uniapp 中使用彩色图标,引入阿里图库iconfont

1,040 阅读1分钟

1.选择symbol模式,下载到本地
在这里插入图片描述
2.下载后解压
在这里插入图片描述
3.在解压开的文件夹中 shift+右键 打开powershell 窗口
执行代码:npm install -g iconfont-tools
在这里插入图片描述
4.然后执行代码:iconfont-tools
然后一路回车(或者根据自己设置)
在这里插入图片描述
5.文件夹中就多出一个文件 iconfont-weapp
在这里插入图片描述
6.把 iconfont-weapp-icon.css 移入你的项目中
在这里插入图片描述
7.App.vue中添加以下代码

@import "./common/iconfont-weapp/iconfont-weapp-icon.css"; //改成自己文件的路径

8.页面中使用

<label class="t-icon iconchajiaoyi"></label>

t-icon:iconfont-weapp-icon.css中图标公共样式
iconchajiaoyi:图标名称(在iconfont-weapp-icon.css中查看,或者阿里项目中复制图标代码)
在这里插入图片描述在这里插入图片描述