当前位置: 首页 > news >正文

uni-app中使用iconfont彩色图标

uni-app中使用iconfont彩色图标

大家好,今天我们来学习一下uni-app中使用iconfont彩色图标,好好看,好好学,超详细的

第一步

首先,从iconfont官网(iconfont-阿里巴巴矢量图标库)选择自己需要的图标加入项目中,点击下载至本地,如图

在这里插入图片描述

第二步

在本地找到下载的压缩包,并解压,进入解压缩之后的文件,在地址栏中输入cmd打卡控制台(在文件夹内输入cmd可直接将路径定位到当前文件夹),如下图:

在这里插入图片描述

第三步

在控制台中输入指令:npm install -g iconfont-tools(此操作前置条件需要用户安装node.js,没有安装node环境可以参考这篇文章:Windows下安装Node.js及环境配置),按回车执行指令,如下图:

在这里插入图片描述

第四步

在控制台中输入指令:iconfont-tools,按回车执行指令,之后会以此出现下图中1-5的内容,可根据自己的需求填写相关设置,如果不填写内容,则会按照默认的信息设置, 如下图所示:

在这里插入图片描述

第五步

在完成上述操作后,可以发现在文件夹中多出了一个iconfont-weapp的文件夹(如果是默认的就是这个名称,如果不是根据自己填写的文件夹名),进入此文件夹, 如下图所示:

在这里插入图片描述

第六步

根据自己需要导入相应的css文件

http://www.lryc.cn/news/146749.html

相关文章:

  • Hystrix: Dashboard流监控
  • iconfont 图标在vue里的使用
  • QT登陆注册界面练习
  • MySQL DATE_SUB的实践
  • OpenCV最常用的50个函数
  • Android AGP8.1.0组件化初探
  • 文件修改时间能改吗?怎么改?
  • 2023年下半年软考报名注意事项!
  • 【LeetCode每日一题】——274.H指数
  • 网络编程 day 4
  • 【Java架构-版本控制】-Git基础
  • ubuntu 挂载硬盘操作
  • 关于商品活动的H5页面技术总结
  • 前端:横向滚动条,拖动进行左右滚动(含隐藏滚动条)
  • Android JNI Bitmap指定颜色值替换
  • 测试理论与方法----测试流程的第四个步骤:执行测试,提出缺陷
  • Stable Diffusion 提示词入门指南
  • 基于鹰栖息算法优化的BP神经网络(预测应用) - 附代码
  • 想要搞懂接口测试和功能测试有什么区别,那就必须知道他们的基本原理
  • Spring: HiddenHttpMethodFilter的用法
  • Vue入门学习(一)
  • 软考:中级软件设计师:无线网,网络接入技术,ipv6
  • dart 学习 之 同步生成器(sync*)和 异步生成器(async*)
  • JSX基础
  • Linux Day11---mbash项目(二)
  • 回归预测 | MATLAB实现IBES-ELM改进的秃鹰搜索优化算法优化极限学习机多输入单输出回归预测(多指标,多图)
  • 【Golang】go条件编译
  • 学习创建第一个 React 项目
  • 使用Python构建网络爬虫:提取网页内容和图片资源
  • 推荐两款开源的绘制流程图软件