遇到需要自定义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. spring cloud (一、服务注册demo_eureka)

    首先我的博客记理论知识很少,大家对spring boot.spring cloud  .分布式 .微服务什么的一点概念都没有的还请先去百度看看理论,知道了是做什么用的,然后再写下demo ,这样学起来 ...

  2. JavaSE| 流程控制

    程序流程控制 流程控制语句结构: .顺序结构 语句的关系是从上到下依次执行的顺序关系,中间没有任何判断和跳转: 它是最基本的结构,Java程序总体来说都是从main()依次执行 .分支结构: 根据条件 ...

  3. 20165235 实验三 敏捷开发与XP实践

    20165235 实验三 敏捷开发与XP实践 主目录: 姓名:祁瑛 学号:20165235 班级:1652 实验课程:JAVA程序设计 实验名称:Java面向对象程序设计 实验时间:2018.4.30 ...

  4. day3逻辑运算符

    今天主讲逻辑运算符 以下是老师的大纲: # + - * / % ** // # == != <> # count = count + 1      count += 1 # count = ...

  5. 左连接不能与or否则in连用

    select  z.sjssny,z.XXSE,z.JXSE,z.nsrsbh, nsr.zgswskfj_dm,nsr.nsrmc,nsr.zgswj_dm,nsr.SSGLY_DM,nsr.nsr ...

  6. Java集合—Set集和Map集

    一.Set集合 1.概述 Set集合无序的.不可重复的元素(无序是指索引) Set集合不按照特定的方法进行排序,只是将元素放在集合中. 下面介绍一下Set集合的HashSet和TreeSet两个实现类 ...

  7. Number String(DP)

    题目: 题意: 给你一个字符串s,s[i] = 'D'表示排列中a[i] > a[i+1],s[i] = 'I'表示排列中a[i] < a[i+1]. 比如排列 {3, 1, 2, 7, ...

  8. linux的文件打包与压缩

    简介 Linux 上常用的压缩/解压工具,介绍了zip.rar.tar的使用. 文件打包和压缩 Linux 上的压缩包文件格式,除了 Windows 最常见的*.zip.*.rar..7z 后缀的压缩 ...

  9. POJ 2823 Sliding Window​ (模板题)【单调队列】

    <题目链接> <转载于>>> > 题目大意: 给你一段序列和一个长为k的窗口,这个窗口从最左边逐渐向右滑,直到滑到最右边,问你,该窗口在滑动的过程中,最大值和 ...

  10. [ 严重 ] my系统核心数据库sql注入

    某网注入 注入点 : xxx.maoyan.com/xxxager.php username存在注入 POST: adminLogin=XX&username=-1&userpwd=X ...