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

uni-app 怎么在tabbar使用阿里图标库

提示:微信小图标不支持使用字体图标的方式,只能下载png

 方法一:直接下载png图片

        我们首选打开阿里矢量图标库 链接在下方 👇 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具icon-default.png?t=N7T8https://www.iconfont.cn/        首先,我们在图标库中选择自己喜欢图标,然后加入到自己的项目中,然后统一下载,在下载的时候要注意下,我们选择下载至本地->下载png

        我们需要下载2种颜色的图标,一个是未选中的,一个是选中的,下载后我们解压到项目的static目录中

然后我们在pages.json的tabbar中引用即可

属性解释:

iconPath:没有选中时显示的图标

selectedIconPath:选中的时候显示的图标

方法二:使用文字图标的方式

        这里在下载的时候需要选择下载至本地

        下载后解压将得到的文件, iconfont.ttf  复制到 项目 static 中去

        然后我们需要在tabBar中设置 iconfontSrc 的值,路径对应刚刚下载的ttf文件即可。

需要注意的是text的值为图标的Unicode(16 进制),前面需要加上一个\u  

\u  代表这是一个16进制的的值

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

相关文章:

  • 勒索病毒剖析
  • 【C++11】第一部分(一万六千多字)
  • FPGA专项课程即将开课,颁发AMD官方证书
  • C++ shared_ptr
  • 2024.6.15
  • 堆栈溢出的攻击 -fno-stack-protector stack smash 检测
  • 掌握特劳特定位理论核心,明晰企业战略定位之重
  • RAGFlow 学习笔记
  • 使用Docker-Java监听Docker容器的信息
  • Spring Boot + Mybatis Plus实现登录注册
  • IDEA创建web项目
  • 二手物品交易系统的设计
  • 探索大数据在信用评估中的独特价值
  • MFC基础学习应用
  • Gradle实现类似Maven的profiles功能
  • 【强化学习】gymnasium自定义环境并封装学习笔记
  • TLE9879的基于Arduino调试板SWD刷写接口
  • 基于 Delphi 的前后端分离:之五,使用 HTMX 让页面元素组件化之面向对象的Delphi代码封装
  • 讲透计算机网络知识(实战篇)01——计算机网络和协议
  • 8个宝藏APP,个个都牛逼哈拉!
  • 使用docker构建java应用
  • Oracle 存储过程
  • 下载站名文件
  • 345453
  • Java操作redis
  • 【数据结构(邓俊辉)学习笔记】图03——拓扑排序
  • C#参数使用场景简要说明
  • 线性代数|机器学习-P10最小二乘法的四种方案
  • 【Android面试八股文】你能描述一下JVM中的类加载过程吗?
  • MYSQL八、MYSQL的SQL优化