uni-app导航栏右侧功能按钮自定义图标显示

问题

uni-app中导航栏功能按钮只提供了一个text属性来设置按钮的显示文本,并未提供额外的设置图标的属性

"buttons": [{"text": "保持"}
]

官方文档

通过查阅官方文档发现,text属性支持使用字体图标

下载字体图标

那么什么是字体图标呢?

可以理解为可作为文本显示的图标,就像我们在微信聊天中插入的表情符号

那么哪里可以下载到字体图标呢?我们可以到iconfont-阿里巴巴矢量图标库下载字体图标

1.首先搜索找到自己想要的图标,然后点击添加入库加入购物车

2.然后在购物车中点击下载代码按钮

3.下载完解压,内容如下

iconfont.ttf就是字体文件,拷贝到项目的/static/iconfont目录下

4.双击打开demo_index.html文件,可以看到字体图标对应的Unicode,后面会用到

使用字体图标

通过fontSrc属性配置字库图标文件的路径

通过text属性配置字体图标的Unicode

需要注意的是我们上个步骤得到的字体图标的Unicode为&#xe625,需要把前面的&#x替换成\u

配置代码如下所示

"titleNView": {"buttons": [{"text": "\ue625","fontSrc": "/static/iconfont/iconfont.ttf"}]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/276682.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Polkadot 品牌焕新提案:重返前卫,市场营销的创新愿景

波卡的品牌形象和营销策略也许将迎来新变化。长久以来一些社区成员批评道,波卡的形象过于保守、太企业化,缺乏 Crypto 行业应有的先锋气质。 在前阵子的 Parity “去中心化” 变革中,Parity 的营销团队经历了大幅的变动,随后建立…

节气丨大雪过后,阳气归根的十五天,这些事再不做就晚了!

亲爱的家人们大家好,大雪,是24节气中的第21个节气,也是冬季的第3个节气。 这一节气的到来,标志着仲冬时节正式开始,特点是气温显著下降、降水量增多。 古人认为“秋冬养阴”,所谓养阴,即是养阳…

Unity Meta Quest 一体机开发(十一):【手势追踪】远距离抓取

文章目录 📕教程说明📕玩家配置 DistanceHandGrabInteractor📕物体配置 DistanceHandGrabInteractable📕调整物体飞向手部的速度📕调整探测物体的范围⭐HandFrustumNarraw⭐HandFrustumWide⭐HeadFrustum 此教程相关的…

camunda流程引擎——Java集成Camunda(上)(笔记)

目录 一、以一个处理流程开始1.1 后端1.2 前端1.3 执行 二、Camunda的补充2.1 使用方式2.2 可视化平台的Cockpit2.3 流程相关数据2.4 表介绍2.5 前端集成Modeler 三、用Java集成Camunda3.1 集成配置3.2 自动部署3.2.1 修改process.xml位置3.2.2 多进程引擎配置与多租户 3.3 历史…

电源测试系统 | 自动化测试体现在哪?有什么特点?

一、背景 随着电源设计研发技术的不断发展,对电源性能以及质量的要求越来越高,传统手动测试以及传统自动化测试方法已经无法满足测试需求,弊端日渐显露: 1. 手动测试过程繁琐、信息零散、难以有效的控制与监测,且人工成…

strtok()的用法及实现哦

1. 用法 1. 声明:char *strtok(char *str, const char *delim) str -- 要被分解成一组小字符串的字符串。第一次调用 strtok() 时,这个参数应该是你想要分割的字符串。随后的调用应该将此参数设置为NULL,以便继续从上次的位置分割。delim -- …

每日一题SQL

以下题目来源微信公众号【SQL数据库开发】 1、编写一个 SQL 查询来实现分数排名。如果两个分数相同,则两个分数排名(Rank)相同。请注意,平分后的下一个名次应该是下一个连续的整数值。换句话说,名次之间不应该有“间隔…

【Qt QML 入门】TextField

TextField 是一个单行文本编辑器,它继承自TextInput,具备TextInput的所有功能,同时扩展了 TextInput 并增加了占位符文本功能和装饰选项。 自定义文本输入框: import QtQuick import QtQuick.Window import QtQuick.ControlsWindo…

OpenCvSharp从入门到实践-(07)绘制图形

目录 1、线段的绘制 1.1实例1-绘制线段拼成一个"王"字 2、矩形的绘制 2.1实例2-绘制一个矩形边框 2.2实例3-绘制一个实心矩形 3、圆的绘制 3.1实例4-绘制"交通灯" 4、多边形绘制 4.1实例5-绘制等腰梯形 5、文字的绘制 5.1实例6-绘制文字OpenCvS…

YB1161是一款高效同步升压转换器低至1pA的超低静态电流。

简介: YB1161是一款高效同步升压转换器低至1pA的超低静态电流。它能够从低电压源输送至少2W的功率,即。5V输出时为0.4A。它还具有真正的关闭功能在关闭和输出期间断开输入和输出短路条件。这消除了对外部MOSFET及其控制电路,用于断开输入输出…

亚信科技AntDB数据库——深入了解AntDB-M元数据锁的实现(二)

5.5 防止低优先级锁饥饿 AntDB-M按照优先级将锁又分了两类,用于解决低优先级锁饥饿问题。 ●独占型(hog): X, SNRW, SNW; 具有较强的不兼容性,优先级高,容易霸占锁,造成其他低优先级锁一直处于等待状态。 ●暗弱型(piglet): SW; …

Vue3报错: ‘defineProps‘ is not defined,解决方法

问题出现: 今天在使用 <script setup>组合式 API 的语法糖的时候&#xff0c;定义defineProps时候报错&#xff1a; ‘defineProps’ is not defined 查了一下资料&#xff0c;这是因为eslint的语法校验导致的问题。 解决方法1&#xff1a; 在项目根目录的文件.eslin…