遇到需要自定义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. maven里面pom文件的各标签介绍

    由于maven在工作中经常使用,但是平时要记的知识点有点多,偶尔回头来看一些东西难免忘记,特此整理一篇笔记,方便大家搜索查询,也方便自己以后查询! 后续碰见其他的标签也会进行更新! maven的pom ...

  2. 环形链表(给定一个链表,返回链表开始入环的第一个节点。 如果链表无环,则返回 null)

    思想: 思想:用快慢指针先判断是否有环,有环则 假设头结点到环入口距离为n,环入口到快慢指针相遇结点距离为m,则慢指针走的路程 为m+n,而快指针走的路程为m+n+k*l (k*l表示绕环走的路程), ...

  3. Shiro笔记(三)shiroFilter拦截器配置原则

    参考: http://blog.csdn.net/yaowanpengliferay/article/details/17281341

  4. maya cmds pymel polyEvaluate 获取 bounding box

    maya cmds pymel polyEvaluate 获取 bounding box cmds.polyEvaluate(bc = 1)   #模型 cmds.polyEvaluate(bc2 = ...

  5. Codeforces 1076D Edge Deletion 【最短路+贪心】

    <题目链接> 题目大意: n个点,m条边的无向图,现在需要删除一些边,使得剩下的边数不能超过K条.1点为起点,如果1到 i 点的最短距离与删除边之前的最短距离相同,则称 i 为 " ...

  6. ssh框架中.xml文件小技巧分离xml

    struts.xml文件 struts.xml文件里的action可以分离出来,如: <!-- 预警信息监测 --> <include file="config/strut ...

  7. 在Adobe Html5 Extension的使用Nodejs的问题

    前情回顾 之前为一个客户开发过一个基于Adobe Premiere的Html5扩展.原本是在Adobe Premiere Pro 2015下面进行调试开发的.一切进展的非常顺利,功能也都正常.但是20 ...

  8. 表达式语言引擎:Apache Commons JEXL 2.1 发布

    http://www.linuxde.net/2011/12/4348.html Commons JEXL 2.1 发布了,该版本和 2.0.1 是二进制兼容的,但源码不兼容,因为新增了两个接口: o ...

  9. C#循环语句整理

    for.while.do while和switch暂时没发现与c++的不同,这里只整理foreach. foreach foreach的作用是遍历集合中的所有元素.foreach语句中的表达式由关键字 ...

  10. webpack打包之有依赖js模块

    一.入口文件main.js var isd = require('./depend.js'); if(isd.isDepend){ console.log('有依赖模块'); } else { con ...