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

解决uniapp的tabBar使用iconfont图标显示方块

今天要写个uniapp的移动端项目,底部tabBar需要添加图标,以往都是以图片的形式引入,但是考虑到不同甲方的主题色也不会相同,使用图片的话,后期变换主题色并不友好,所以和UI商量之后,决定使用iconfont阿里巴巴矢量图标库。
想着就是需要简单的引入图标即可,但万万没想到,uniapp的坑,让我猝不及防,好在摸索了大半天,总算有个好的结果,为了记录这次跌倒的坑,决定写下来,希望能帮到其他人。
不过丑话说前面,每个人报错的原因都不一定相同,请自己进行排查错误之后,再针对性参考别人的意见,当然,代码这东西很玄学,有的时候,什么都对,就是出不来,也不是没有可能的。

  1. 在iconfont图标库选择自己需要用的图标,地址
    ,打包下载至本地,放在static文件夹中,注意,我没有去调整css文件里相对路径或者在线地址什么的,(因为调整之后变成小方块了,图标啥也不显示),就打包下来有什么文件就放什么文件就行了
  2. 避坑如下:在pages.json文件中
"tabBar": {"color": "#000000","selectedColor": "#000000","borderStyle": "white","backgroundColor": "#ffffff","iconfontSrc": "/static/icon/iconfont.ttf",//注意这里!!!!一定要在tabBar里,与list同级的位置引入iconfont的src,从static开始写!!!!!!!!"list": [{"pagePath": "pages/index","iconfont": {"text": "\ue604",//这里也需要注意,使用的是iconfont里的Unicode类型下的代码标识,但是!引入时,需要将&#x改为\u,否则无法识别"selectedText": "\ue604","color": "#e6e6e6","selectedColor": "#07C160"},"text": "首页"}, {"pagePath": "pages/fillingList/index","iconfont": {"text": "\ue605","selectedText": "\ue605","color": "#e6e6e6","selectedColor": "#07C160"},"text": "旅游"}, {"pagePath": "pages/mine/index","iconfont": {"text": "\ue677","selectedText": "\ue677","color": "#e6e6e6","selectedColor": "#07C160"},"text": "个人"},]},

icon图标显示小方块,搜索了很多文档说需要将iconfont.css文件里的src改为绝对路径啥的,我不知道为啥,按照他们的改了之后,不报错,也出不来。回归了原始的代码之后,iconfont的原文件,我什么都没改,就是需要注意下iconfontSrc的书写位置和地址引入问题,以及代码标识前缀改为\u
完美~
收工!

相关文章:

解决uniapp的tabBar使用iconfont图标显示方块

今天要写个uniapp的移动端项目,底部tabBar需要添加图标,以往都是以图片的形式引入,但是考虑到不同甲方的主题色也不会相同,使用图片的话,后期变换主题色并不友好,所以和UI商量之后,决定使用icon…...

UE4/5C++多线程插件制作(0.简介)

目录 插件介绍 插件效果 插件使用 English 插件介绍 该插件制作,将从零开始,由一个空白插件一点点的制作,从写一个效果到封装,层层封装插件,简单粗暴的对插件进行了制作: 插件效果 更多的是在cpp中去…...

ChatFile实现相关流程

文本上传构建向量库后台库的内容 调用上传文件接口先上传文件 存在疑问:暂时是把文件保存在tmp文件夹,定时清理,是否使用云存储 根据不同的文件类型选取不同的文件加载器加载文件内容 switch (file.mimetype) {case application/pdf:loader new PDFLoader(file.path)breakc…...

15 文本编辑器vim

15.1 建立文件命令 如果file.txt就是修改这个文件,如果不存在就是新建一个文件。 vim file.txt 使用vim建完文件后,会自动进入文件中。 15.2 切换模式 底部要是显示插入,是编辑模式; 按esc,底部要是空白的&#xff0…...

如何运行疑难解答程序来查找和修复Windows 10中的常见问题

如果Windows 10中出现问题,运行疑难解答可能会有所帮助。疑难解答人员可以为你找到并解决许多常见问题。 一、在控制面板中运行疑难解答 1、打开控制面板(图标视图),然后单击“疑难解答”图标。 2、单击“疑难解答”中左上角的…...

程序员成长之路心得篇——高效编码诀窍

随着AIGC的飞速发展,程序员越来越能够感受到外界和自己的压力。如何能够在AI蓬勃发展的时代不至于落后,不至于被替代?项目的开发效率起了至关重要的作用。 首先提出几个问题: 如何实现高效编程?高效编程的核心在于哪里&#xff…...

matlab使用教程(6)—线性方程组的求解

进行科学计算时,最重要的一个问题是对联立线性方程组求解。在矩阵表示法中,常见问题采用以下形式:给定两个矩阵 A 和 b,是否存在一个唯一矩阵 x 使 Ax b 或 xA b? 考虑一维示例具有指导意义。例如,方程 …...

Verilog语法学习——边沿检测

边沿检测 代码 module edge_detection_p(input sys_clk,input sys_rst_n,input signal_in,output edge_detected );//存储上一个时钟周期的输入信号reg signal_in_prev;always (posedge sys_clk or negedge sys_rst_n) beginif(!sys_rst_n)signal_in_prev < 0;else…...

springboot和springcloud的联系与区别

什么是springboot&#xff1f; Spring Boot是一个用于简化Spring应用程序开发的框架&#xff0c;它提供了一种约定优于配置的方式&#xff0c;通过自动配置和快速开发能力&#xff0c;可以快速搭建独立运行、生产级别的Spring应用程序。 在传统的Spring应用程序开发中&#xf…...

【Web开发指南】如何用MyEclipse进行JavaScript开发?

由于MyEclipse中有高级语法高亮显示、智能内容辅助和准确验证等特性&#xff0c;进行JavaScript编码不再是一项繁琐的任务。 MyEclipse v2023.1.2离线版下载 JavaScript项目 在MyEclipse 2021及以后的版本中&#xff0c;大多数JavaScript支持都是开箱即用的JavaScript源代码…...

【C++进阶】多态

⭐博客主页&#xff1a;️CS semi主页 ⭐欢迎关注&#xff1a;点赞收藏留言 ⭐系列专栏&#xff1a;C进阶 ⭐代码仓库&#xff1a;C进阶 家人们更新不易&#xff0c;你们的点赞和关注对我而言十分重要&#xff0c;友友们麻烦多多点赞&#xff0b;关注&#xff0c;你们的支持是我…...

决策树的划分依据之:信息增益率

在上面的介绍中&#xff0c;我们有意忽略了"编号"这一列.若把"编号"也作为一个候选划分属性&#xff0c;则根据信息增益公式可计算出它的信息增益为 0.9182&#xff0c;远大于其他候选划分属性。 计算每个属性的信息熵过程中,我们发现,该属性的值为0, 也就…...

SolidUI社区-独立部署 和 Docker 通信分析

背景 随着文本生成图像的语言模型兴起&#xff0c;SolidUI想帮人们快速构建可视化工具&#xff0c;可视化内容包括2D,3D,3D场景&#xff0c;从而快速构三维数据演示场景。SolidUI 是一个创新的项目&#xff0c;旨在将自然语言处理&#xff08;NLP&#xff09;与计算机图形学相…...

Windows下FreeImage库的配置

首先下载FreeImage库&#xff0c;http://freeimage.sourceforge.net/download.html&#xff0c;官网下载如下&#xff1a; 内部下载地址&#xff1a;https://download.csdn.net/download/qq_36314864/88140305 解压后&#xff0c;打开FreeImage.2017.sln&#xff0c;如果是vs…...

用python编写一个小程序,如何用python编写软件

大家好&#xff0c;给大家分享一下用python编写一个小程序&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 1、python可以写手机应用程序吗&#xff1f; 我想有人曲解意思了&#xff0c;人家说用python开发渣蔽一个手机app&#xff0c;不是…...

WPF实战学习笔记32-登录、注册服务添加

增加全局账户名同步 增加静态变量 添加文件&#xff1a;Mytodo.Common.Models.AppSession.cs ausing Prism.Mvvm; using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Threading.Tasks; us…...

XGBoost的参数

目录 1. 迭代过程 1.1 迭代次数/学习率/初始&#x1d43b;最大迭代值 1.1.1 参数num_boost_round & 参数eta 1.1.2 参数base_score 1.1.3 参数max_delta_step 1.2 xgboost的目标函数 1.2.1 gamma对模型的影响 1.2.2 lambda对模型的影响 2. XGBoost的弱评估器 2.…...

【已解决】windows7添加打印机报错:加载Tcp Mib库时的错误,无法加载标准TCP/IP端口的向导页

windows7 添加打印机的时候&#xff0c;输入完打印机的IP地址后&#xff0c;点击下一步&#xff0c;报错&#xff1a; 加载Tcp Mib库时的错误&#xff0c;无法加载标准TCP/IP端口的向导页 解决办法&#xff1a; 复制以下的代码到新建文本文档.txt中&#xff0c;然后修改文本文…...

用于紫外线消毒灯的LED驱动:数明深紫外消毒方案SLM201

用于紫外线消毒灯的LED驱动SLM201 应用于紫外线消毒灯的LED驱动。疫情过后让越来越多的人开始注重起个人健康&#xff0c;除了出门佩戴口罩外&#xff0c;对于居家消毒也越发重视起来。而居家消毒除了75%浓度酒精及各类消毒液外&#xff0c;利用紫外线灯给衣物表面、房间消毒也…...

Docker部署Springboot应用【mysql部署+jar部署+Nginx部署】

【项目达到目标】 1.基本准备 2、mysql部署 3、jar部署 4、Nginx部署 一、基本准备 石工拿的就是之前放置在我们服务器上的应用进行部署&#xff0c;主要就是mysql和jar还有Vue的部署。 目前已经有的是jar、已经打包好的vue 二、mysql部署 docker run -d --name mysql \ …...

开源破产法律实务知识库:构建结构化办案指南与协作平台

1. 项目概述&#xff1a;一个破产法律实务的开源知识库最近在整理过往的破产案件卷宗时&#xff0c;我一直在思考一个问题&#xff1a;如何将那些零散、重复但又至关重要的法律文书、办案流程和实务要点&#xff0c;系统地沉淀下来&#xff0c;形成一套可以随时查阅、迭代更新的…...

AI编程也开始“贵价提速”?Cursor上线Opus极速模式,官方却劝你:别开,真不值!

前言各位码农老铁们&#xff0c;最近有没有感觉写代码像在开手动挡老爷车——油门踩到底&#xff0c;AI还在“思考人生”&#xff1f;别急&#xff0c;Cursor贴心地给你装了个“涡轮增压”&#xff1a;Claude Opus 4.7 Fast mode&#xff0c;号称速度拉满、输出飞起&#xff01…...

MacBook远程控制Win10打游戏?聊聊Microsoft Remote Desktop的那些隐藏玩法和限制

MacBook远程控制Win10打游戏&#xff1f;Microsoft Remote Desktop的极限性能测试与实战技巧 当MacBook用户需要临时调用Windows电脑的资源时&#xff0c;远程桌面工具往往成为救急首选。但你是否想过&#xff0c;这类工具能否胜任游戏、视频剪辑甚至3D建模等高图形负载任务&am…...

可视化调试工具 gdb-dashboard

1. 安装 gdb-dashboard gdb-dashboard 开源项目地址&#xff1a;https://github.com/cyrus-and/gdb-dashboard 项目完全是使用Python脚本编写&#xff0c;可以直接下载脚本到工程目录 wget -P ~ https://git.io/.gdbinit .gdbinit 文件在Linux系统下是隐藏文件&#xff0c;…...

(二)进程的状态优先级

1进程的状态(兼容所有操作系统)1.1并行和并发CPU执行进程代码&#xff0c;不是把进程代码执行完毕&#xff0c;才开始执行下一个 而是给每一个进程预分配一个 时间片&#xff0c;基于时间片&#xff0c;进行调度轮转(单CPU下)&#xff0c;并发。并发&#xff1a;多个进程在一个…...

架构设计实战指南:在约束中做取舍的工程智慧

架构设计实战指南&#xff1a;在约束中做取舍的工程智慧 版本&#xff1a;V1.0 适合人群&#xff1a;开发工程师、架构师、技术负责人、CTO、技术出身的创业者写在前面&#xff1a;你是不是也遇到过这些问题&#xff1f; 如果你是开发工程师&#xff1a; 刚写完的代码&#xff…...

嵌入式飞行控制实战:从传感器融合到PID调参的无人机飞控开发指南

1. 项目概述与核心价值最近在嵌入式开发圈子里&#xff0c;一个名为trsdn/nanopielot的项目引起了我的注意。乍一看这个名字&#xff0c;它像是一个针对特定硬件平台&#xff08;比如树莓派 Pico 或类似的 RP2040 微控制器&#xff09;的飞行控制项目。nanopi可能指代 NanoPi 系…...

基于RAG与代码专用嵌入模型构建本地智能代码库问答系统

1. 项目概述与核心价值最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“smart-codebase”。光看名字&#xff0c;你可能觉得这又是一个关于代码智能化的工具&#xff0c;但仔细研究其设计和实现思路&#xff0c;你会发现它瞄准的是一个非常具体且高频的痛点&#xff1a;如…...

Apple Silicon Mac原生Linux游戏体验:Asahi Linux驱动突破与实战指南

1. 项目概述&#xff1a;当Apple Silicon Mac遇见原生Linux游戏如果你和我一样&#xff0c;既是Mac用户&#xff0c;又对在Linux系统上折腾抱有热情&#xff0c;那么最近Asahi Linux项目的进展绝对会让你心跳加速。长久以来&#xff0c;在搭载Apple Silicon&#xff08;M1、M2、…...

BQ34Z100-G1电量计配置不求人:用咸鱼EV2400+BqStudio完成电池组参数学习的保姆级教程

BQ34Z100-G1电量计配置实战&#xff1a;从零搭建高精度电池管理系统 在新能源和储能系统蓬勃发展的今天&#xff0c;精确的电池电量计量已成为电池管理系统(BMS)的核心竞争力。德州仪器(TI)的BQ34Z100-G1阻抗跟踪电量计凭借其出色的精度和稳定性&#xff0c;在工业储能、电动工…...