解决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
完美~
收工!

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

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

相关文章

HCIP OSPF链路状态类型总结

OSPF的LSA OSPF是典型的链路状态路由协议,使用LAS(链路状态通告)来承载链路状态信息。LSA是OSPF的一个核心内容,如果没有LSA,OSPF 是无法描述网络的拓扑结构及网段信息的,也无法传递路由信息,更…

hbuilderx主题色分享-github风格

效果 步骤 hbuilderx总共有三种主题,绿柔主题Default,酷黑主题Monokai,雅黑主题Atom One Dark,修改主题色是基于三种主题之一的,不能直接创建一个新主题,比如下方配置是基于Atom One Dark(对象名为[Atom One Dark]),则当前hbuild…

Stream API:Java 8 编程的秘密武器

Stream API 是 Java 8 中最重要的新特性之一,它是处理集合和数组的一种新方式。它提供了一种简单、灵活和可读的方式来处理集合和数组中的元素,从而使代码更加简洁、高效和易于维护。 1. 原理介绍 Stream API 的核心是 Stream 接口,它表示一…

union和union all

union 是一个计算机函数,用于合并两个或多个 SELECT 语句的结果集。 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列。列也必须拥有相似的数据类型。同时,每条 SELECT 语句中的列的顺序必须相同。 union 语法: select …

Profinet转EtherNet/IP网关连接AB PLC的应用案例

西门子S7-1500 PLC(profinet)与AB PLC以太网通讯(EtherNet/IP)。本文主要介绍捷米特JM-EIP-PN的Profinet转EtherNet/IP网关,连接西门子S7-1500 PLC与AB PLC 通讯的配置过程,供大家参考。 1, 新建工程&…

06-MySQL-基础篇-SQL之DCL语句

SQL之DCL语句 前言DCL 管理用户查询用户创建用户修改用户密码删除用户说明 权限控制常见权限描述查询权限授予权限撤销权限说明 前言 本篇来学习下SQL中的DCL语句 DCL DCL英文全称是Data Control Language(数据控制语言),用来管理数据库用户、控制数据库的访问权…

有哪些类似bootstrap的纯css框架?

前言 下面是一些类似bootstrap的css框架,以及其开源的仓库和网址附上,整理不易,希望多多点一下赞同收藏喜欢哈~ 1、Tailwind Star:70.5k Tailwind CSS 是一个实用的工具集,用于快速构建现代化的自定义用户界面。它提…

7、单元测试--测试RestFul 接口

单元测试–测试RestFul 接口 – 测试用例类使用SpringBootTest(webEnvironment WebEnvironment.RANDOM_PORT)修饰。 – 测试用例类会接收容器依赖注入TestRestTemplate这个实例变量。 – 测试方法可通过TestRestTemplate来调用RESTful接口的方法。 测试用例应该定义在和被测…

vue2实现一个树型控件(支持展开树与checkbox勾选)

目录 vue2实现一个树型控件(支持展开树与checkbox勾选)TreeItem.vueTree.vue效果 vue2实现一个树型控件(支持展开树与checkbox勾选) TreeItem.vue <template><div class"tree-item"><span click"toggleExpanded" class"icon" v…

Sentinel Dashboard集成Nacos

1.前言 当项目上Sentinel Dashboard做流量监控的时候&#xff0c;我们可以通过Sentinel控制台修改限流配置&#xff0c;但当我们使用Nacos作为配置中心动态配置流控规则的时候&#xff0c;问题就来了。 首先我们要明白&#xff0c;Sentinel Dashboard的配置是从机器的内存中加…

TCP网络通信编程之网络上传文件

【图片】 【思路解析】 【客户端代码】 import java.io.*; import java.net.InetAddress; import java.net.Socket; import java.net.UnknownHostException;/*** ProjectName: Study* FileName: TCPFileUploadClient* author:HWJ* Data: 2023/7/29 18:44*/ public class TCPFil…

【SpringBoot笔记36】SpringBoot自定义WebSocketHandler集成WebSocket

这篇文章,主要介绍SpringBoot自定义WebSocketHandler集成WebSocket。 目录 一、SpringBoot集成WebSocket 1.1、添加WebSocket依赖 1.2、自定义WebSocketHandler 1.3、注册WebSocket服务端

NoSQL--------- Redis配置与优化

目录 一、关系型数据库与非关系型数据库 1.1关系型数据库 1.2非关系型数据库Nosql 1.3关系与非关系区别 1.4非关系产生的背景 1.5总结 二、Redis介绍 2.1Redis简介 2.3Redis优点 2.4 Redis为什么这么快&#xff1f; 三、Redis安装部署 3.1安装redis 3.2测试redis 3.3r…

【论文简述】DIP: Deep Inverse Patchmatch for High-Resolution Optical Flow(CVPR 2022)

一、论文简述 1. 第一作者&#xff1a;Rui Li 2. 发表年份&#xff1a;2023 3. 发表期刊&#xff1a;CVPR 4. 关键词&#xff1a;光流、深度学习、PatchMatch、局部搜索 5. 探索动机&#xff1a;对于深度学习来说&#xff0c;除了准确性之外&#xff0c;性能和内存也是一个…

基于深度学习的CCPD车牌检测系统(PyTorch+Pyside6+YOLOv5模型)

摘要&#xff1a;基于CCPD数据集的高精度车牌检测系统可用于日常生活中检测与定位车牌目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的车牌目标检测识别&#xff0c;另外支持结果可视化与图片或视频检测结果的导出。本系统采用YOLOv5目标检测模型训练数据集…

回归预测 | MATLAB实现GRNN广义回归神经网络多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现GRNN广义回归神经网络多输入单输出回归预测(多指标,多图) 目录 回归预测 | MATLAB实现GRNN广义回归神经网络多输入单输出回归预测(多指标,多图)效果一览基本介绍程序设计参考资料效果一览 基本介绍 MATLAB实现GRNN广义回归神经网络多输入单输出回归…

centos动态内网IP如何改静态

要将CentOS从动态内网IP改为静态IP&#xff0c;需要按照以下步骤进行操作&#xff1a; 打开终端并以root用户身份登录。 编辑网络配置文件。在终端中输入以下命令&#xff1a; vi /etc/sysconfig/network-scripts/ifcfg-eth0 这个命令将打开eth0配置文件。如果您的网络接口…

GitLab备份升级

数据备份(默认的备份目录在/var/opt/gitlab/backups/下&#xff0c;生成一个以时间节点命名的tar包。) gitlab-rake gitlab:backup:create新建repo源&#xff0c;升级新版本的gitlab vim /etc/yum.repos.d/gitlab-ce.repo [gitlab-ce] namegitlab-ce baseurlhttps://mirrors.…

JavaScript将一层级对象数组转为children嵌套的三层级树状对象数组(多级树状分类)

有时候后端返回的数据不适合前端,我们就需要进行转换,比如我想用elementUI的级联选择器,而这个组件对数据格式有要求,本篇文章将介绍如何将一层级对象数组数据格式转为三层级嵌套children数组,JavaScript、Vue、小程序等都适用,使用情景为多级分类,嵌套数据 情况1:原数…

解决el-table打印时数据重复显示

1.表格数据比较多加了横向滚动和竖向滚动&#xff0c;导致打印出问题 主要原因是fixed导致&#xff0c;但是又必须得滚动和打印 方法如下&#xff1a; 1. 2. is_fixed: true,//data中定义初始值 3.打印时设置为false,记得要改回true if (key 2) { this.is_fixed false //打…