iconfont 图标如何在uniapp中的tabBar使用

news2024/11/16 5:40:17

注意: 小程序并不支持tabBar中 设置 iconfont

1. 材料准备

  1. 首先进入字体图标网址:iconfont-阿里巴巴矢量图标库;(如果你没有登入,记得登入一下)

  2. 把图标添加入购物车

  3. 添加到购物车之后-(右上角)点击购物车-(右下角)点击下载代码

  4. 下载后是一个压缩包-在里面找到 iconfont.ttf(这就是我们要用材料) 文件

备注:添加至项目之后,你可以看到图标的编码,已经图标的样式便于你的使用

2. 进入uniapp 项目

  1. 找到static 文件夹,在里面新建-fonts文件夹- 把iconfont.ttf 文件复制进去

3. 找到pages.json 文件

  1. 在pages.json 文件中找到tabBar 对象,按需写入一下代码

    "tabBar": {
            "color": "#ccc",
            "selectedColor":"red",
            // 引入字体图标库
            "iconfontSrc": "static/fonts/iconfont.ttf",
            "list": [
                {
                    "pagePath": "pages/index/index",
                    "text": "首页",
            // 优先级高于 iconPath,该属性依赖 tabbar 根节点的 iconfontSrc
                    "iconfont": { 
                        "text": "\ue605", //  这是图标原始的编码
                        "selectedText": "\ue605", //
                        "fontSize": "17px",  // 图标大小
                        "color": "#333", // 未选中时,图标的颜色
                        "selectedColor": "red" // 选中时,图标的颜色
                    }
                }
            ]
        },

    ###  使用效果

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

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

相关文章

逻辑回归—分类问题的操作顺序

对于二元分类问题来说,分类的结果和数据的特征之间仍呈现相关关系,但是y的值不再是连续的,是0~1的跃迁。但是在这个过程中,什么仍然是连续的呢?”是概率,概率是逐渐升高的,当达到一个…

JVM12 字节码指令集

1. 概述 2. 加载与存储指令 2.1. 局部变量压栈指令 iload 从局部变量中装载int类型值 lload 从局部变量中装载long类型值 fload 从局部变量中装载float类型值 dload 从局部变量中装载double类型值 aload 从局部变量中装载引用类型值(refernce) iload_0 从…

从交换机安全配置看常见局域网攻击

前言 构建零信任网络,自然离不开网络准入(NAC),这就涉及到交换机的一些安全测试,于是有了此文《从交换机安全配置看常见局域网攻击》。 交换机安全配置 如本文标题所说从交换机安全配置看常见的局域网攻击,那么下面提到的各种攻…

leaflet 绘制多个点的envelope矩形(082)

第082个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中如何根据多边形的几个坐标点来绘制envelope矩形。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果. 文章目录 示例效果配置方式示例源代码(共78行)安装插件相关API参考:专栏目标示例…

【Java】线程的生命周期和状态

一、通用的线程的生命周期,简称:五态模型: 初始状态:指语言层面上的创建线程,操作系统中还没有创建。可运行状态:指线程可以分配CPU执行,这时线程已经在系统中创建成功。运行状态:指…

0元搭建linux服务器(windows笔记本)

0元搭建linux服务器一.windows装Centos71.1 centos7 iso镜像1.2 准备U盘1.3 UltraISO 启动盘制作工具安装1.4 准备一台windows 机器1.5 安装过程二 、连接无线wifi三、固定wifi ip3.1 查看网络状态3.2 查看DNS3.3 查看GATEWAY3.4 设置静态IP四、一键快速安装单机版k8s五、申请域…

基于CCG算法的IEEE33配电网两阶段鲁棒优化调度matlab

目录 1 前言 2基本内容 2.1 配网两阶段鲁棒模型 2.2 求解步骤 3部分程序 4程序结果 5程序链接 1 前言 鲁棒优化是电力系统研究的热点,而两阶段鲁棒和分布鲁棒研究就成为各类期刊(sci/ei/核心)的宠儿,最简单的思路是通过改…

CACTER云网关无缝对接O365系统,反垃圾实力强硬!

01 客户背景 某IT互联网企业是国家认定的高新技术企业、上海市重点大数据企业。自成立以来,坚持以自主研发为本,以客户为中心,专注汽车保险科技,具备强大的研发实力,致力为行业提供数字化智能化车商保险业务管理综合解…

python采集最新世界大学排名, 来看看你的母校上榜没~

前言 大家早好、午好、晚好吖 ❤ ~ 本次内容: Python 采集世界大学排行榜 并做数据可视化 知识点: 动态数据抓包 requests发送请求 结构化非结构化数据解析 开发环境: python 3.8 运行代码 pycharm 2021.2 辅助敲代码 requests 第三方模块 pip install 模块名 本次文…

基于 DSP+FPGA 的高清图像跟踪系统研制

目标识别与跟踪技术是目前图像处理研究的重点方向,在军事和民用领域中 具有广泛的应用价值,如精确制导武器、导弹飞机预警等军事领域,如交通管理、 刑事侦查等民用领域。其中,如何在复杂的背景中,提取、识别与跟踪特定…

File类的用法和InputStream,OutputStream的用法

这里写自定义目录标题一、File类1.构造方法2.普通方法二、InputStream1.方法2.FileInputStream3.Scanner类的应用三、OutputStream1.方法2.FileOutputStream3.PrintWriter类的应用一、File类 1.构造方法 签名说明File(File parent, Stringchild)根据父目录 孩子文件路径&…

车载前摄像头学习笔记 ———— 视频编码格式

文章目录简介格式H.26XH.261H.263H.264/AVCNALU HeaderNALU PayloadSODBRBSPEBSPMPEG-XMPEG-1MPEG-2MPEG-4MPEG-7MPEG-21简介 视频是可以理解为连续的图像序列。获取的一帧即为一幅图像,在每一帧的数据中,所有的内容都是静止的。为什么看起来是运用的呢&…

c/c++开发,无可避免的模板编程实践(篇六)

一、泛型算法 1.1 泛型算法概述 c标准库不仅包含数据结构(容器、容器适配器等),还有很多算法。数据结构可以帮助存放特定情况下需要保存的数据,而算法则会将数据结构中存储的数据进行变换。标准库没有给容器添加大量的功能函数&am…

基于springboot+vue的校园社团管理系统(前后端分离)

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容:毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

9.循环神经网络

9.循环神经网络 目录 序列模型 统计工具 自回归模型 马尔可夫模型 训练 预测 文本预处理 读取数据集 词元化 词表 整合所有功能 总结 语言模型和数据集 学习语言模型 马尔可夫模型与m元语法 自然语言统计 读取长序列数据 随机采样 顺序分区 总结 循环神经…

树状数组(高级数据结构)-蓝桥杯

一、简介树状数组 (Binary Indexed Tree,BIT),利用数的二进制特征进行检索的一种树状结构。一种真正的高级数据结构: 二分思想、二叉树、位运算、前缀和。高效!代码极其简洁!二、基本应用数列a1,a2,....,an,操作:单点修改&#xf…

微服务架构是什么?微服务架构与SOA的区别

微服务架构定义微服务架构是一种架构风格和架构思想,它倡导我们在传统软件应用架构的基础上,将系统业务按照功能拆分为更加细粒度的服务,所拆分的每一个服务都是一个独立的应用,这些应用对外提供公共的API,可以独立承担…

Python3 operator 模块

Python3 operator 模块 Python2.x 版本中,使用 cmp() 函数来比较两个列表、数字或字符串等的大小关系。 Python 3.X 的版本中已经没有 cmp() 函数,如果你需要实现比较功能,需要引入 operator 模块,适合任何对象,包含…

从防御者视角来看APT攻击

前言 APT防御的重要性毋庸讳言,为了帮助各位师傅在防御方面建立一个总体认识,本文会将APT防御方法分为三类,分别是:监控、检测和缓解技术,并分别进行梳理,介绍分析代表性技术。这一篇分析现有的监控技术。…

多重继承的虚函数表

同一个类,不同对象使用同一张虚函数表 不同类使用不同的虚函数表 子类自己添加的虚函数(非重写),在VS中是将此放在第一个继承类的虚函数表里. #include <iostream> using namespace std;class Father { public:virtual void func1() { cout << "Father::f…