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中的图标并不是图片,而 ...
随机推荐
- JAVA中值类型和引用类型的不同(面试常考)
转载:https://www.cnblogs.com/1ming/p/5227944.html 1. JAVA中值类型和引用类型的不同? [定义] 引用类型表示你操作的数据是同一个,也就是说当你传一个 ...
- react学习三
三点运算符 (...)的用法 1:展开运算符 let a=[1,2,3]; let b=[0,...a,4];//[0,1,2,3,4] let obj ={a:1,b:2}; let obj2 = ...
- 大家的备忘录——xpage_在线引用jQuery
<xp:this.resources> <xp:dojoModule name="dojo.fx"></xp:dojoModule> <x ...
- HDU 1540 Tunnel Warfare(经典)(区间合并)【线段树】
<题目链接> 题目大意: 一个长度为n的线段,下面m个操作 D x 表示将单元x毁掉 R 表示修复最后毁坏的那个单元 Q x 询问这个单元以及它周围有多少个连续的单元,如果它本身已经被 ...
- 动手创建 SSD 目标检测框架
参考:单发多框检测(SSD) 本文代码被我放置在 Github:https://github.com/XinetAI/CVX/blob/master/app/gluoncvx/ssd.py 关于 SS ...
- Python 面向对象的补充
isinstance(obj,cls)和issubclass(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls 的对象 1 class Foo(object) ...
- 利用nginx,腾讯云免费证书制作https
之前一直在研究,https怎么弄.最近看到了腾讯云提供的免费得ssl证书,寻思把网站弄成https. 首先先去腾讯云购买一个免费得证书. 点击后填写内容, 然后下载证书 解压证书就可以看到,提供四种方 ...
- BZOJ.3170.[TJOI2013]松鼠聚会(切比雪夫距离转曼哈顿距离)
题目链接 将原坐标系每个点的坐标\((x,y)\)变为\((x+y,x-y)\),则原坐标系中的曼哈顿距离等于新坐标系中的切比雪夫距离. 反过来,将原坐标系每个点的坐标\((x,y)\)变为\((\f ...
- 流畅的Python读书笔记(二)
2.1 可变序列与不可变序列 可变序列 list. bytearray. array.array. collections.deque 和 memoryview. 不可变序列 tuple. str 和 ...
- Java 装饰模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述装饰(Decorator)模式的: 装饰模式又名包装(Wrapper)模式.装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替 ...