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

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

注意: 小程序并不支持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.lryc.cn/news/13976.html

相关文章:

  • 第六章.卷积神经网络(CNN)—卷积层(Convolution)池化层(Pooling)
  • c/c++开发,无可避免的模板编程实践(篇六)
  • 【Java】Spring核心与设计思想
  • 组合实现多类别分割(含实战代码)
  • 从红队视角看AWD攻击
  • 龙腾万里,福至万家——“北京龙文化促进协会第九届龙抬头传承会”在京举办
  • 《软件方法》强化自测题-业务建模(4)
  • Prometheus之pushgateway
  • 3分钟带您快速了解HIL测试及其架构
  • 华为认证含金量如何?
  • 刷题记录:牛客NC54586小翔和泰拉瑞亚
  • 面试个3年自动化测试,测试水平一言难尽。。。。
  • C++面向对象(下)
  • 面试一位软件测试6年工作者:一年经验掰成六年来用....
  • Java8 新特性--Optional
  • Pytorch GPU版本简明下载安装教程
  • 【C++】map和set的封装
  • 互融云金融控股集团管理平台系统搭建
  • Git复习
  • WebGPU学习(2)---使用VertexBuffer(顶点缓冲区)
  • 【C++之容器篇】AVL树的底层原理和使用
  • 从交换机安全配置看常见局域网攻击
  • 工具篇3.5世界热力图
  • 2023-02-20 leetcode-insertionSortList
  • LeetCode初级算法题:环形链表+排列硬币+合并两个有序数组java解法
  • 网络编程学习一
  • Javascript 立即执行函数
  • 基于Django和vue的微博用户情感分析系统
  • 【C++】IO流
  • 【论文速递】ACL 2021-CLEVE: 事件抽取的对比预训练