uniapp基于阿里图标库引入彩色的图标iconfont

1.进入阿里巴巴矢量图标库链接: https://www.iconfont.cn/,添加图标到项目,然后下载至本地

2.对下载的文件进行解压,命令行进入解压后的文件下,执行一下命令,全局安装iconfont-tools工具

javascript 复制代码
npm install -g iconfont-tools

3.当我们全局下载完工具以后,点开文件夹,在文件夹的导航栏cmd,再执行如下的代码,然后回车

打开之后,执行如下代码

javascript 复制代码
iconfont-tools 

4.然后接下来一直回车即可

5.最后一步就是将我们在文件夹下产生的新的文件夹下使用iconfont.css的文件

6.然后在APP.vue的文件下引入你的文件名称

javascript 复制代码
<style>
/* 彩色的图标*/
@import url("~@/static/icon/iconfont-weapp-icon.css");
</style>

7.使用:其中xk857-icon开头是必须的,彩色图标当前对 vue文件有效,控制台会关于backgroud的相关警告,可忽略它

javascript 复制代码
<text class="xk857-icon icon-sheji-xianxing"></text>
相关推荐
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui2 小时前
uniapp启动图被拉伸问题
uni-app
iOS阿玮5 小时前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
ModyQyW1 天前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘2 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘2 天前
uniapp——地图路线绘制map
uni-app
shadouqi2 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤2 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端3 天前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app