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中的图标并不是图片,而 ...
随机推荐
- IDEA添加源码包
1.在项目中选中左上角的File--->Project Structure 2.选择需要添加的源码包 3.源码已经加入
- Noj - 在线强化训练1
1445 A 求n个整数的和 1564 B 判断一个数是否是完全数 1011 C 判素数(Prime number) 1566 D 输入一组整数,找出最小值 1200 E 判断三角 ...
- Jenkins使用遇到的问题总结
学新技能最方便的就是在网上找教程了,我找到一个还不错的易百教程 Jenkins教程 别看教程写了一堆,其实真正用到的没多少.后面的自动化测试,服务器维护啥的,等用到的时候再深入研究吧 No1: 按照教 ...
- QT +go 开发 GUI程序
,转载 https://blog.csdn.net/lanbery/article/details/81745611 如果你是一个墨守成规的coding,请移步其他内容,这部分内容可能不适合你.如 ...
- php 图形用户界面GUI 开发
php 图形用户界面GUI 开发 一.下载指定系统扩展 1 2 http://pecl.php.net/package/ui http://pecl.php.net/package/ui/2.0.0/ ...
- 牛客练习赛 26 B题 烟花【DP】(经典)
<题目链接> 题目描述 小a有个烟花,每个烟花代表着互不相同的颜色,对于第个烟花,它有的概率点燃,现在小a要去点燃它们,他想知道产生颜色的期望个数 及 产生恰好产生种颜色的概率 输入描述: ...
- APP开发,微信第三方登录的介绍
去年做了一阵APP相关的开发,经常遇到第三方登陆的需求,比如微信.微博.fb的第三方登陆等等,其实主要的流程都大同小异,这里就以微信为例来介绍,希望对大家有帮助. 微信开放平台(open.weixin ...
- Java的运算符
运算符用于执行程序代码运算,会针对一个以上操作数项目来进行运算.下面介绍JAVA中的运算符: (1)算术运算符: 单目:+(取正) -(取负) ++(自增1) --(自减1) 双目:+ - * / % ...
- Linux 默认目录
/etc 存放系统管理所需要的配置文件和子目录 /home 一般用户的主目录 /usr 用户使用的系统目录和应用程序等信息 /bin 存放使用者经常使用的命令 如cp ls cat 等 /proc ...
- Python接口测试简单框架
用例设计: 执行用例代码: # -*- coding: UTF-8 -*-import xlrd,logging,urllib,urllib2,json,sysfrom pylsy import py ...