uniappp配置导航栏自定义按钮(解决首次加载图标失败问题)

在这里插入图片描述

1.引入iconfont的图标,只保留这两个文件
在这里插入图片描述
2.App.vue引入到全局中

@import "./static/fonts/iconfont.css"

3.pages.json中配置text为图标对应的unicode
在这里插入图片描述

{
			"path": "pages/invite/invite",
			"style": {
				"h5": {
					"titleNView": {
						"buttons": [{
							"color": "#fff",
							"fontSize": "50rpx",
							"text": ""
						}],
						"backgroundColor": "#FE2248"
					}
				},
				"navigationBarTitleText": "邀请"
			}

		},

4.最后最关键的一步将iconfont.css中的iconfont改为.uni-btn-icon(底下是修改后的)

@font-face {
  font-family: "iconfont"; /* Project id 4778538 */
  src:url('iconfont.ttf?t=1733910972592') format('truetype');
}

//只改这里
.uni-btn-icon {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-bangzhu:before {
  content: "\e60e";
}

官网说用\ue60e 这种,但实际是首次进入页面加载不出来,刷新才会出现

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

融云分享基于 Rust 的鸿蒙 SDK 开发实践

12 月 5 日,以“同心聚力,共建共享鸿蒙新生态”为主题的“鸿蒙生态伙伴 SDK 开发者论坛”在京举行。 融云凭借对鸿蒙生态的率先适配和创新贡献,荣获华为鸿蒙生态“HarmonyOS NEXT SDK 星河奖”。 本次论坛邀请了多位行业领导者参与&#xff…

iperf3 带宽性能测量工具

随笔记录 目录 1 背景介绍 2. Iperf3 2.1 基本框架介绍 2.2 Iperf3 发送TCP包 2.3 IPerf 发送UDP 包 1 背景介绍 基于测试USER DMA 压力测试需求。 2. Iperf3 2.1 基本框架介绍 Iperf3 发送数据包 TCP/UDP 包 1. 查看网卡配置信息 2. 此处因共用一张板卡&#xff0…

Java-27 深入浅出 Spring - 实现简易Ioc-03 在上节的业务下手动实现IoC

点一下关注吧!!!非常感谢!!持续更新!!! 大数据篇正在更新!https://blog.csdn.net/w776341482/category_12713819.html 目前已经更新到了: MyBatis&#xff…

vue使用pdfh5.js插件,显示pdf文件白屏

pdfh5,展示文件白屏,无报错 实现效果图解决方法(降版本)排查问题过程发现问题查找问题根源1、代码写错了?2、预览文件流的问题?3、pdfh5插件更新了,我的依赖包没更新?4、真相大白 彩蛋 实现效果图 解决方法…

【机器学习算法】——决策树之集成学习:Bagging、Adaboost、Xgboost、RandomForest、XGBoost

集成学习 **集成学习(Ensemble learning)**是机器学习中近年来的一大热门领域。其中的集成方法是用多种学习方法的组合来获取比原方法更优的结果。 使用于组合的算法是弱学习算法,即分类正确率仅比随机猜测略高的学习算法,但是组合之后的效果仍可能高于…

C/S软件授权注册系统(Winform+WebApi+.NET8+EFCore版)

适用软件:C/S系统、Winform桌面应用软件。 运行平台:Windows .NETCore,.NET8 开发工具:Visual Studio 2022,C#语言 数据库:Microsoft SQLServer 2012,Oracle 21c,MySQL8&#xf…

Big Model weekly | 第49期

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入! 01 Magnetic Preference Optimization: Achieving Last-iterate Convergence for Language Models Alignment 自我对弈方法在多个领域增强模型能力方面展现出了显著的成功。在基于人类反馈的强化学习&#xff0…

如何建设金融数据中心

目录 总则 概述 要求 基本原则 数据中心治理 概述 战略管控 战略规划 战略实施 延伸阅读 总则 概述 本文以描述金融数据中心的治理域内容为基础,从金融数据中心建设、运营及安全保障的角度出 发,逐一描述场地环境、网络通信、运行管理和风险管控等能力域的具体…

医学分割数据集B超图片肝脏分割数据集labelme格式271张1类别

数据集格式:labelme格式(不包含mask文件,仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数):271 标注数量(json文件个数):271 标注类别数:1 标注类别名称:["liver"] 每个类别标注的框数&#xf…

Android:展锐T760平台camera PDAF调试

一、平台PDAF流程 目前展锐平台主要支持Shield PD Sensor、Dual PD Sensor 1、Shield PD Sensor Type1相位差和信心度结果直接从Sensor输出,不经过平台算法库。 Type2Sensor端抽取PD信息, 放在一块buffer输出, PDAF算法库算出相位差和信心度。 Type3Sensor端直接输出将带有…

MySQL的历史和地位

秋招之后,开始深入学习后端开发知识啦。把学到的东西分享给大家最开心啦。就从MySQL开始吧。 首先说一下MySQL的历史和地位。主要是看一下我们为什么要学习,而不是说让我们学什么我们就学什么。 地位 这张图是我从DB-Engines截取的2024年12月最新的数据…

鸿蒙项目云捐助第七讲鸿蒙App应用的首页推荐模块布局的实现

鸿蒙项目云捐助第七讲鸿蒙App应用的首页推荐模块布局的实现 最后设置首页的推荐模块,参考模板如下图所示。 一、首页热门推荐模块的实现 对于热门推荐模块,先有上面的小标题栏,这里的标题栏也有一个小图标,首先从“百度图库”中…

使用ENSP实现NAT(2)

一、NAT的类型 二、静态NAT 1.项目拓扑 2.项目实现 路由器AR1配置: 进入系统视图 sys将路由器命名为AR1 sysname AR1关闭信息中心 undo info-center enable 进入g0/0/0接口 int g0/0/0将g0/0/0接口IP地址配置为192.168.10.254/24 ip address 192.168.10.254 24进…

【1211更新】腾讯混元Hunyuan3D-1文/图生3D模型云端镜像一键运行

目录 项目介绍 显存占用 11月21 新增纹理烘焙模块Dust3R 烘焙相关参数: AutoDL云端镜像 启动说明 标准模型下载 【1212更新】腾讯混元Hunyuan3D-1文图生3D模型云端镜像一键运行 项目介绍 https://github.com/Tencent/Hunyuan3D-1 腾讯混元 3D 生成模型,支持…

PHP 应用 ImageMagick

ImageMagick是什么? ImageMagick是一款功能强大、跨平台的图像处理软件。它可以读取、转换和输出大量的图片格式,支持各种各样的图像处理操作,如调整大小、旋转、加水印、格式转换等。在PHP中使用ImageMagick,可以让我们在web应用…

OpenCV圆形标定板检测算法findGrid原理详解

OpenCV的findGrid函数检测圆形标定板的流程如下: class CirclesGridClusterFinder {CirclesGridClusterFinder(const CirclesGridClusterFinder&); public:CirclesGridClusterFinder

阿里云服务器手动搭建WordPress【官方文档注意事项】

这是官方文档 注意事项 先配LNMP,我的上一篇文章到这里发现,没有基于ubuntu的教程,所以创建服务器时选择centos在官方文档第四步“下载WordPress,并移动至网站根目录”中,首先它让cd /usr/share/nginx/html&#xff…

vue运行项目时local有显示 但是network却显示unavailable

问题描述 日常开发中 和后端本地调试时 后端需要使用你的本地去访问页面 可运行项目时会出现network显示unavailable的情况 解决方式 1.其实这只是vue脚手架对于ip地址获取的方式兼容上有一些问题 但其实是不影响ip访问本地的 你可以直接cmd内ipconfig去查看自己的ip然后…

Go项目-----Kubernetes使用

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言基本概念kubectl工具部署web服务生成镜像编写deployment 编写service启动服务 k8s部署mysql编写pvc编写pv编写service 部署redis集成部署mysql和redis 前言 这…

SpringCloud无介绍快使用,sentinel注解@SentinelResource的基本使用(二十三)

TOC 问题背景 从零开始学springcloud微服务项目 注意事项: 约定 > 配置 > 编码IDEA版本2021.1这个项目,我分了很多篇章,每篇文章一个操作步骤,目的是显得更简单明了controller调service,service调dao默认安装ngi…