ionic ion-tab图标修改, 自定义tab图标
遇到需要自定义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图标的更多相关文章
- 如何修改MFC的图标
原文:如何修改MFC的图标 修改左上角的图标和任务栏里图标 在对话框构造函数中 CTestDlg::CTestDlg(CWnd* pParent /*=NULL*/) : CDialog(CTestD ...
- ionic3-ng4学习见闻--(自定义ion-tab图标)
学习混合开发语言,目的就是为了快速开发一个适用于多平台的app. app基本都会有footer,也就是tabbar,用来快速导航不同的页面. ionic也有这个组件,ion-tab. 常用方法如下: ...
- fontawesome-iconpicker 自定义字体图标选择器
官网地址:https://farbelous.io/fontawesome-iconpicker/ 头部文件引入 <!--本地地址--> <link href="../cs ...
- CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
- 自定义radio图标
问题: 默认的radio控件不是很好看,我们能否自定义一个radio图标? 解决: 1.radio有input和lable两个标签. 2.<input>是前面的图标,选中后图标变化. 3. ...
- echarts之legend-改变图例的图标为自定义图片
legend:{ show:true, orient:'horizontal', borderColor:'#df3434', borderWidth:2, data:[ { name:'蒸发量', ...
- 自定义iconfont 图标库下载本地在移动App的使用及svg彩色图标
自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http: ...
- Echarts的legend改变图例图标为自定义图片
当折线图时,legend默认时rect形式,如果需要改图例形状,可以自己设置legend的icon属性 legend: { icon:'stack' }, 1.自定义每个图例样式:为data的每个对象 ...
- 在项目中增加自定义icon图标
以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...
随机推荐
- Archive for required library: 'E:/repository/org/apache/ant/ant/1.7.1/ant-1.7.1.jar' in project 'test02' cannot be read or is not a valid ZIP file
Archive for required library: 'E:/repository/org/apache/ant/ant/1.7.1/ant-1.7.1.jar' in project 'tes ...
- tesorflow - create neural network+结果可视化+加速神经网络训练+Optimizer+TensorFlow
以下仅为了自己方便查看,绝大部分参考来源:莫烦Python,建议去看原博客 一.添加层 def add_layer() 定义 add_layer()函数 在 Tensorflow 里定义一个添加层的函 ...
- Spring(一)Spring介绍
Spring是一个开源框架. Spring是一个分层的JavaSE/EE 一站式轻量级框架. Spring在JavaEE三层架构中,每一层都提供不同的解决技术. -Web层:SpringMVC. -S ...
- maven聚合工程无法install
对于maven聚合工程,有时候执行maven命令进行mvn clean install时会出一些莫名奇妙的错误: 一直报告找不到符号,仔细看了项目源代码也不知道是什么原因.首先确保项目所在路径为英文路 ...
- HDU-1170的解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1170 题意:要求输入几个案例,每个案例包含操作符(+,-,*,/),操作数(两个整数).现在要求分别输 ...
- rock-paper-scissors
rock-paper-scissors维护三个前缀和,然后注意顺序,最后做差来确定可行的答案,因为答案比较小,可以考虑这种暴力做法,像这种方案数可以++的题真的不多,如果想不出来特别优秀的想法,不妨简 ...
- Java内存管理-一文掌握虚拟机创建对象的秘密(九)
勿在流沙筑高台,出来混迟早要还的. 做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! [福利]JVM系列学习资源无套路赠送 回顾一下: 本文是接着上一篇内容:Java内存管 ...
- spring boot默认访问静态资源
演示spring boot默认可以直接访问静态资源的2种方法: 第一种:在src/main/resources资源目录下创建一个名为"static"的文件夹(该文件夹的名称是规定死 ...
- python数据结构之冒泡排序
冒泡排序是一种基础排序算法,在python中,我们利用列表的的方式来完成,它对列表中的元素进行重复的遍历,在遍历的同时进行比较,如果两个数没有按照我们规定的顺序进行排列,就按照我们预先设定好的是顺序或 ...
- BZOJ-1- 4868: [Shoi2017]期末考试-三分
三分出成绩时间,假设当前出成绩最优,那么提前就会调增老师,增加不愉快度多于少等待的:如果延迟时间. 那么等待更久,增加的不愉快度也将多余少调增剩省下的. 于是:对于当前点,两边都是有单调性的. 就是说 ...