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配置web项目启动的详细说明
每次用完一个编辑器以后 ,再换另一个编辑器使用 过段时间再回来使用idea,总是会忘记些什么 ,毕竟每个编辑器的风格和结构都有所区别 特此记下笔记 方便以后查看 图片文字看不清的 请在图片上 ...
- 07. Matplotlib 3 |表格样式| 显示控制
1.表格样式创建 表格视觉样式:Dataframe.style → 返回pandas.Styler对象的属性,具有格式化和显示Dataframe的有用方法 样式创建:① Styler.applymap ...
- day56 文件 文档处理,事件
前情回顾: 1. 前情回顾 0. 选择器补充 - 属性选择器 - $("[egon]") - $("[type='text']") - $("inpu ...
- 【未解决】Linux下PHP安装扩展Mysql的问题
[步骤分析] 1.在PHP源码包下定位到指定位置:源码包/ext/mysqli 注1:网上很多地方红字部分是mysql,其实PHP5以后已经不用mysql了. 2.运行:/usr/local/php/ ...
- nginx: [error] open() "/var/run/nginx/nginx.pid" failed (2: No such file or directory)
在重启nginx服务的时候,出现了这个错误. [root@izuf68g6a94fj32w0afx00z etc]# nginx -c /var/run/nginx/nginx.pid nginx: ...
- 4535 ACM 礼尚往来 数学排列组合
题目:http://acm.hdu.edu.cn/showproblem.php?pid=4535 题意:每个礼物都不相同的组合个数 数学规律: 将每个女友排序为1···n,对应的女友送男友的礼物排序 ...
- c# Array、ArrayList、List
1.Array:在内存中连续存储.索引速度快.赋值,修改元素简单. 不足:(1)插入数据麻烦 (2)声明时必须指定长度 2.ArrayList:解决了Array的不足 不足:(1)类型不安全 (2)存 ...
- Yii2 数据库sql查询
Yii2.0 对数据库 查询的一些简单的操作 User::find()->all(); //返回所有数据: User::findOne($id); //返回 主键 id=1 的一条数据(举个例子 ...
- Java 泛型 介绍
为什么需要泛型? public class GenericTest { public static void main(String[] args) { List list = new ArrayLi ...
- c# js 删除table原行数据
function addtreetotable(obj){ var table1 = document.getElementById("Table1"); var hang = ...