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.xdnf.cn/news/1452578.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

板凳------56.Linux/Unix 系统编程手册(下) -- SOCKET 介绍

56.1.概述 socket 是一种IPC方法,允许位于同一主机或使用网络连接起来的不同主机上的应用程序之间交换数据。 UNIX 允许位于同一主机系统上的应用程序之间通信 Internet domain IPv4 and IPV6 // socket 通信方式 1.各个应用程序创建一个socket,socket是…

GEO ISP图像调试-PFC(蓝紫边校正)

目录 1、简单介绍 2、调试策略 3、输出结果 1、简单介绍 GEO中中调整图像蓝紫边可分为两步,第一步:调整蓝紫边检测区域,第二步:设置去蓝紫边强度。 2、调试策略 图1 该图像蓝紫边较严重 主要原因是由于蓝紫边检测不准导致的&…

GStreamer 源码编译,在 Clion 下搭建调试环境

前言 最近在学习 GStreamer,官方提供了一些教程,本人希望能够断点调试,以便学习代码逻辑。本文记录如何在 Clion 搭建 GStreamer 源码编译、调试环境 步骤 下载源码 git clone https://gitlab.freedesktop.org/gstreamer/gstreamer.gitCl…

Orange_Pi_AIpro运行蜂鸟RISC-V仿真

Orange_Pi_AIpro运行蜂鸟RISC-V仿真 突发奇想,试一试Orange Pi AIpro上运行蜂鸟RISC-V的仿真。 准备 默认已经有一个Orange Pi AIpro,并且对设备进行一定的初始化配置,可以参考上一篇博文开源硬件初识——Orange Pi AIpro(8T&a…

第2章 Rust初体验3/8:使用Result进行错误处理:编译时错误检查增强代码安全性:猜骰子冷热游戏

讲动人的故事,写懂人的代码 2.3.9 类型的关联函数:简化对象创建和初始化 席双嘉:“那个String::new(),毫无疑问,它确实像C++中的静态成员函数。” 贾克强:“哈哈!是的,两个冒号确实让人联想到一些东西,对吧?” “这其实是Rust中的关联函数(associated function,详…

非线性规划解决工资分配问题

来源:河北工业职业技术大学 安彤彤 彭金杉 张家硕 题目 薪资发放问题 一般公司给职员发放薪金,通常按每月等额发放。某公司即将改进薪金发放方案,允许任职5年以上的职员向公司财务部门申请工资每月可变额度发放,每月工资发放额…

HAL库开发--串口

知不足而奋进 望远山而前行 目录 文章目录 前言 学习目标 学习内容 开发流程 串口功能配置 串口功能开启 串口中断配置 串口参数配置 查询配置结果 发送功能测试 中断接收功能测试 printf配置 DMA收发 配置 DMA发送 DMA接收(方式1) DMA接收(方式2) 总结 前言…

关于二分法的理解(以JS为例)

算法介绍 基本概念 二分查找算法,又称折半查找算法,是一种在有序数组中查找特定元素的高效方法。它的核心思想是将数组分成两半,然后根据目标值与中间元素的比较结果来决定是继续在左半部分还是右半部分进行搜索。 工作原理 初始化&#…

【漏洞复现】东胜物流软件 GetProParentModuTreeList SQL注入漏洞

0x01 产品简介 东胜物流软件是青岛东胜伟业软件有限公司-款集订单管理、仓库管理、运输管理等多种功能于一体的物流管理软件。该公司初创于2004年11月(前身为青岛景宏物流信息技术有限公司),专注于航运物流相关环节的产品和服务。东胜物流信息管理系统货代版采用MS…

计算机组成原理历年考研真题对应知识点(计算机系统层次结构)

目录 1.2计算机系统层次结构 1.2.2计算机硬件 【命题追踪——冯诺依曼计算机的特点(2019)】 【命题追踪——MAR 和 MDR 位数的概念和计算(2010、2011)】 1.2.3计算机软件 【命题追踪——三种机器语言的特点(2015)】 【命题追踪——各种翻译程序的概念(2016)】 1.2.5计算…

网络协议,OSI,简单通信,IP和mac地址

认识协议 1.讲故事 2004年,小明因为给他爹打电话(座机)费用太贵,所以约定一种信号,响一次是报平安,响两次是要钱,响三次才需要接通。 2.概念 协议:是一种约定,这种约…

【odoo15】前端自定义模态弹窗

概要 在odoo15或者在15之前,odoo前端的owl框架还没完全替换当前前端框架的时候,我们很多时候都是用js或者jq来直接操作dom,那么我们如果需要在前端用到一个模态弹窗,可以怎么解决呢? 方法1 直接用js原生的模态弹窗&am…

Zadig vs. Jenkins 详细比较

01、Zadig vs. Jenkins:关于时代的选择 最近官方公众号发布了一篇名为 《是时候和 Jenkins 说再见了》的文章,引起了社区的广泛关注和讨论。作为曾经最被广泛使用的持续构建交付工具,Jenkins 的江湖地位似乎被挑战了。评论中有一条被高度点赞…

和鲸科技执行总裁殷自强:面向空间数据协同分析场景的模型生命周期管理方法

导读: 由 ACM SIGSPATIAL 中国分会主办的第五届空间数据智能学术会议(SpatialDI 2024)于 2024 年 4 月 25 日- 27 日在南京圆满召开,主题为“ AGI 时代下的空间数据智能”,旨在深入推动空间数据智能研究的理论进步与应…

解决javadoc一直找不到路径的问题

解决javadoc一直找不到路径的问题 出现以上问题就是我们在下载jdk的时候一些运行程序安装在C:\Program Files\Common Files\Oracle\Java\javapath下: 一开始是没有javadoc.exe文件的,我们只需要从jdk的bin目录下找到复制到这个里面,就可以使用…

苹果电脑装虚拟机和双系统的区别 苹果笔记本虚拟机和双系统哪个好 虚拟机能装MacOS吗 虚拟机类似的软件

Mac电脑用户在需要使用Windows操作系统的软件时,通常会面临两个选择:安装双系统或使用虚拟机。两种方式各有优缺点,适用于不同的使用场景。本文将详细分析和说明Mac电脑装双系统和虚拟机之间的区别,帮助用户选择最适合自己的方案。…

实况:老菜鸟自力更生从零开始重学spring目标是画出一张唬人大图(二、源码下载编译)

前情提要:调试前的基础知识梳理 速览 “Spring”包含哪些东西源码下载源码编译1、编译工具选择:gradle2、使用gradle编译spring并导入idea预编译spring-oxm导入IDEA确认合适的jdk版本排除spring-aspects模块 开始调试 “Spring”包含哪些东西 可以明确的…

民生银行信用卡中心金融科技24届春招面经

本文介绍2024届春招中,中国民生银行下属信用卡中心的金融科技(系统研发方向) 岗位2场面试的基本情况、提问问题等。 2024年04月投递了中国民生银行下属信用卡中心的金融科技(系统研发方向) 岗位,暂时不清楚…

Linux--08---挂载分区

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1.查看系统磁盘分区情况1.lsblk 查看2.fdisk -l 2.挂载未分区磁盘1. 创建分区2. 格式化分区3. 创建挂载点4. 挂载分区5. 更新 /etc/fstab6.验证挂载 3.修改挂载的磁…

力扣19. 删除链表的倒数第N个节点

给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。 示例 1: 输入:head [1,2,3,4,5], n 2 输出:[1,2,3,5] 示例 2: 输入:head [1], n 1 输出:[] 示例…