遇到需要自定义tab图标很简单, 只需要自定义相应的css就可以了, 这里要注意的是如何调整背景图片的大小.

<ion-view hide-back-button="false">
<style>
.ion-ios-home0 {
background: url(img/home0.png) no-repeat 50% 50%;
background-size: 20px 20px;
} .ion-ios-book0 {
background: url(img/book0.png) no-repeat center ;
background-size: 20px 20px;
} .ion-android-person0 {
background: url(img/person0.png) no-repeat center ;
background-size: 20px 20px;
} .ion-ios-home1 {
background: url(img/home1.png) no-repeat center ;
background-size: 20px 20px;
} .ion-ios-book1 {
background: url(img/book1.png) no-repeat center ;
background-size: 20px 20px;
} .ion-android-person1 {
background: url(img/person1.png) no-repeat center ;
background-size: 20px 20px;
} </style>
<ion-tabs class="tabs-icon-top tabs-color-active-assertive tabs-light" ng-class="{'tabs-item-hide': $root.hideTabs}" delegateHandle="main">
<ion-tab title="首页" icon="ion-ios-home0" nav-direction="swap" icon-on="ion-ios-home1" href="#/home/index/code/">
<ion-nav-view name="tab-index"></ion-nav-view>
</ion-tab>
<ion-tab title="学习" icon="ion-ios-book0" nav-direction="swap" icon-on="ion-ios-book1" href="#/home/inread">
<ion-nav-view name="tab-inread"></ion-nav-view>
</ion-tab>
<ion-tab title="我的" icon="ion-android-person0" nav-direction="swap" icon-on="ion-android-person1" href="#/home/user-center">
<ion-nav-view name="tab-usercenter"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>

ionic ion-tab图标修改, 自定义tab图标的更多相关文章

  1. 如何修改MFC的图标

    原文:如何修改MFC的图标 修改左上角的图标和任务栏里图标 在对话框构造函数中 CTestDlg::CTestDlg(CWnd* pParent /*=NULL*/) : CDialog(CTestD ...

  2. ionic3-ng4学习见闻--(自定义ion-tab图标)

    学习混合开发语言,目的就是为了快速开发一个适用于多平台的app. app基本都会有footer,也就是tabbar,用来快速导航不同的页面. ionic也有这个组件,ion-tab. 常用方法如下: ...

  3. fontawesome-iconpicker 自定义字体图标选择器

    官网地址:https://farbelous.io/fontawesome-iconpicker/ 头部文件引入 <!--本地地址--> <link href="../cs ...

  4. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  5. 自定义radio图标

    问题: 默认的radio控件不是很好看,我们能否自定义一个radio图标? 解决: 1.radio有input和lable两个标签. 2.<input>是前面的图标,选中后图标变化. 3. ...

  6. echarts之legend-改变图例的图标为自定义图片

    legend:{ show:true, orient:'horizontal', borderColor:'#df3434', borderWidth:2, data:[ { name:'蒸发量', ...

  7. 自定义iconfont 图标库下载本地在移动App的使用及svg彩色图标

    自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http: ...

  8. Echarts的legend改变图例图标为自定义图片

    当折线图时,legend默认时rect形式,如果需要改图例形状,可以自己设置legend的icon属性 legend: { icon:'stack' }, 1.自定义每个图例样式:为data的每个对象 ...

  9. 在项目中增加自定义icon图标

    以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...

随机推荐

  1. Scala-Unit4-Scala数组/集合

    一.Scala数组 1.数组的定义: 方法一:val arr = new Array[String](3) String代表数据的元素类型.3表示数组的长度 方法二:val arr = Array[I ...

  2. Maze-hdu4035(DP求概率)

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=4035 题意: 有n个房间,由n-1条隧道连通起来,实际上就形成了一棵树, 从结点1出发,开始走,在每个结点 ...

  3. POJ 2481 Cows 【树状数组】

    <题目链接> 题目大意: 就是给出N个区间,问这个区间是多少个区间的真子集. 解题分析: 本题与stars类似,只要巧妙的将线段的起点和终点分别看成 二维坐标系中的x,y坐标,就会发现,其 ...

  4. python专题 --- 递归

    如果一个函数在函数内部调用自身本身,这个函数就是递归函数 举例如阶乘函数,其数学递归定义如下: 对应的算法实现 def fact(n): if n==1: return 1 return n * fa ...

  5. 附006.harbor.cfg配置文件详解

    一 必须参数 需要在配置文件中设置这些参数.如果用户更新它们harbor.cfg并运行install.sh脚本以重新安装Harbor,它们将生效. hostname:目标主机的主机名,用于访问UI和注 ...

  6. 【java并发核心八】Fork-Join分治编程

    jdk1.7中提供了Fork/Join并行执行任务框架,主要作用就是把大任务分割成若干个小任务,再对每个小任务得到的结果进行汇总. 正常情况下,一些小任务我们可以使用单线程递归来实现,但是如果要想充分 ...

  7. python数据结构之冒泡排序

    冒泡排序是一种基础排序算法,在python中,我们利用列表的的方式来完成,它对列表中的元素进行重复的遍历,在遍历的同时进行比较,如果两个数没有按照我们规定的顺序进行排列,就按照我们预先设定好的是顺序或 ...

  8. MVC面试问题与答案

    读这篇文章不意味着你一定要去并且能搞定MVC面试.这篇文章的目的是在面试之前让你快速复习MVC知识.这篇文章也不是MVC培训课程. 如果你想学习MVC,从这儿开始 Learn MVC ( Model ...

  9. redis+mysql

    redis和mysql要根据具体业务场景去选型 mysql:数据放在磁盘   redis:数据放在内存 redis适合放一些频繁使用,比较热的数据,因为是放在内存中,读写速度都非常快,一般会应用在下面 ...

  10. 大数据环境完全分布式搭建 hadoop2.4.1

    (如果想要安装视频及相关软件可以博私聊我 qq 731487514) hadoop2.0已经发布了稳定版本了,增加了很多特性,比如HDFS HA.YARN等.最新的hadoop-2.4.1又增加了YA ...