遇到需要自定义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. 如何使用java代码启动tomcat和打开浏览器

    1.用于代码启动tomcat,也可以用代码运行电脑应用程序 public static void main(String[] args) { /* new MyThread().start(); ne ...

  2. Python并发复习3 - 多进程模块 multiprocessing

    python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了非常好用的多进程包multiprocessing,只需要定 ...

  3. git&github快速掌握

    git&github快速掌握 安装git 版本库创建 代码修改并提交 代码回滚 工作区和暂存区 撤销操作 删除操作 更多操作 Windows下安装git https://gitforwindo ...

  4. 动态 Web Server 技术发展历程

    动态 Web Server 技术发展历程 开始接触 Java Web 方面的技术,此篇文章是以介绍 Web server 相关技术的演变为主来作为了解 Java servlet 的技术背景,目的是更好 ...

  5. webpack打包之有依赖es2015模块

    一.入口文件main.js import { isDepend } from './depend.js'; import { fn } from './depend2.js'; if(isDepend ...

  6. OSPF补全计划-1

    OSPF全称是啥我就不絮叨了,什么迪杰斯特拉,什么开放最短路径优先算法都是人尽皆知的事儿,尤其是一提算法还会被学数据结构的童鞋鄙视,干脆就不提了,直接开整怎么用吧.(不过好像真有人不知道OSPF里的F ...

  7. .net3.5 支持tuple

    添加下面引用即可: https://github.com/SaladLab/NetLegacySupport

  8. 给有C或C++基础的Python入门 :Python Crash Course 5 if语句

    本章就是Pyhon版的 if语句.原理大家都懂,就不一一说说明了. 值得注意的两点: 1. 在每个if类语句结尾必须加上符号“:”. 2. 注意,在python中是否缩进代表与上一行代码是否有关. 下 ...

  9. BZOJ.4446.[SCOI2015]小凸玩密室(树形DP)

    BZOJ LOJ 洛谷 (下面点亮一个灯泡就说成染色了,感觉染色比较顺口... 注意完全二叉树\(\neq\)满二叉树,点亮第一个灯泡\(\neq\)第一次点亮一号灯泡,根节点应该就是\(1\)... ...

  10. 第一章 初始STM32

    1.3什么是STM32? ST是意法半导体,M是MIcroelectronisc的缩写,32表示32位. 合起来就是:ST公司开发的32位微控制器. 1.4 STM32 能做什么? STM32属于一个 ...