ionic2 tabs 自定义图标

一、准备资源

  • tabs icon 的svg格式的矢量图片

二、生成字体样式文件

  • 打开icoMoon网站去制作字体文件。

三、使用字体文件

解压下载的文件,将其中的fonts文件夹拷贝到ionic2项目的src/assest目录下。并且将其目录下的styles.css文件命名为wecare.scss(这个名称是你字体的文件名称),再将其拷贝到ionic2项目的src/assest/fonts目录下。下来我们去修改wecare.scss文件。
  1. 修改@font-face中的引用地址。

    $font-path: '../assets/fonts';
    @font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'wecare';
    src: url('#{$font-path}/wecare.eot?l80w4l');
    src: url('#{$font-path}/wecare.eot?l80w4l#iefix') format('embedded-opentype'),
    url('#{$font-path}/wecare.ttf?l80w4l') format('truetype'),
    url('#{$font-path}/wecare.woff?l80w4l') format('woff'),
    url('#{$font-path}/wecare.svg?l80w4l#wecare') format('svg');
    }
  2. 修改字体的公共样式部分的选择器

    原代码

        [class^="ion-"], [class*=" ion-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'wecare' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    修改后

        .wecare {
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: 'wecare' !important;
    line-height: 1;
    /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: none;
    } .ion-ios-smart-outline:before,
    .ion-ios-smart:before,
    .ion-md-smart-outline:before,
    .ion-md-smart:before,
    .ion-ios-test-outline:before,
    .ion-ios-test:before,
    .ion-md-test-outline:before,
    .ion-md-test:before {
    @extend .wecare;
    }
    注:将一个通用的选择器改为一个类,然后让被应用的类去继承,是因为使用[class^="ion-"], [class*=" ion-"] 来选择时会影响到ionic2自带的图标库,这也是ionic2字体库的写法。
  3. 字体的引用

    .ion-ios-smart-outline:before {
    content: '\e904';
    } .ion-ios-smart:before {
    content: '\e905';
    } .ion-md-smart-outline:before {
    content: '\e904';
    } .ion-md-smart:before {
    content: '\e905';
    } .ion-ios-test-outline:before {
    content: '\e900';
    } .ion-ios-test:before {
    content: '\e901';
    } .ion-md-test-outline:before {
    content: '\e900';
    } .ion-md-test:before {
    content: '\e901';
    }

    注:在ionic2中引用图标主要靠名称来引用,它会根据Platform自动添加前缀如ios或android(.ion-ios-smart.ion-md-smart),所以我们必须为ios与android各写一个类名,其中像.ion-ios-test-outline这种是tab未被选中时的样式。

  4. 将我们的sass文件导入src/theme/variables.scss ,然后就可以在tabs中使用了。

    @import '../assets/fonts/wecare';
    <ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="Now" tabIcon="test"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="Assessment" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Trends" tabIcon="contacts"></ion-tab>
    <ion-tab [root]="tab4Root" tabTitle="Smart" tabIcon="smart"></ion-tab>
    <ion-tab [root]="tab5Root" tabTitle="Settings" tabIcon="contacts"></ion-tab>
    </ion-tabs>

四、解决android中icon只能使用一张icon的问题

 在ionic2中android的tab图标选中与未选中只能使用一张svg图片,只是颜色不同。如果我们想要像在ios中一样选中与未选中使用不同的icon,就不能办到。我们的项目的需求就是这样,我不得已只能去看ionic2关于tabs与tab的源码,找到解决问题的方法。我们应该知道在ios中它是通过-outline的后缀来控制显示未选中的icon。起初我看了tabs与tab的源码,没有找到关于这个问题的部分。最后在icon的源码中找到了关于这个问题的部分代码。
	if (iconMode === 'ios' && !this._isActive && name.indexOf('logo-') < 0 && name.indexOf('-outline') < 0) {
name += '-outline';
}
它是判断是否是ios与 !this._isActive时给icon的name添加-outline后缀。但是我们也不能去改源码,因为如果以后升级会覆盖。
但是天无绝人之路,在tab的api中提供了一个被选中时调用的方法,我们通过这个方法来改变icon。下面是代码
<ion-tabs>
<ion-tab [root]="tab1Root" (ionSelect)="change(0)" tabTitle="Now" tabIcon="{{test[0]}}"></ion-tab>
<ion-tab [root]="tab2Root" (ionSelect)="change(1)" tabTitle="Assessment" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" (ionSelect)="change(2)" tabTitle="Trends" tabIcon="contacts"></ion-tab>
<ion-tab [root]="tab4Root" (ionSelect)="change(3)" tabTitle="Smart" tabIcon="{{test[3]}}"></ion-tab>
<ion-tab [root]="tab5Root" (ionSelect)="change(4)" tabTitle="Settings" tabIcon="contacts"></ion-tab>
</ion-tabs>
test: Array<string> = ["test", "", "", "smart", ""];
change(a: number) {
if (this.platform.is("android")) {
for (let i = 0; i < 5; i++) {
if (i === a) {
this.test[i] = this.test[i].split("-")[0];
} else {
this.test[i] = this.test[i].split("-")[0] + "-outline";
}
}
}
}

五、最后来看一下效果

ionic2 tabs 自定义图标的更多相关文章

  1. ionic2 tabs使用自定义图标

    在ionic2中图标是通过类添加的 比如说   tabIcon="homeImg" 在页面中研究可以看到在ios上有一个类是 .ion-ios-homeImg:before 所以我 ...

  2. ionic2 +Angular 使用自定义图标

    结合阿里巴巴矢量图标库实现在ionic2开发中使用自定义图标. step1:在阿里巴巴图标管理中新建项目,并添加自己选中的图标到购物车: step2:将购物车中的图标"添加至项目" ...

  3. ionic2中使用自定义图标

    在ionic2中使用自定义图标,如iconfont(阿里巴巴矢量图标). 先在http://www.iconfont.cn/ 中找到自己需要的图标,然后将图标加入购物车,然后下载该图标. 下载完成后解 ...

  4. ionic3之自定义tabs菜单图标

    请参考以下链接 ionic3之自定义tabs菜单图标

  5. 为bootstrap添加更多自定义图标

    From: http://blog.csdn.net/mengxiangfeiyang/article/details/45224731 Twitter Bootstrap 真是前端开发的瑞士军刀,作 ...

  6. Windows 8.1——将网站固定到开始菜单,自定义图标、颜色和Windows推送通知

    记得在IE 9和Windows 7刚出来那会儿我写过一篇文章来介绍如何自定义网站将其固定到Windows的任务栏上,同时自定义图标及任务内容.那个功能在IE 9中被称之为JumpList.http:/ ...

  7. IconVault – 创建自定义图标字体的神器推荐

    图标字体简单来说就是外观呈现为图标的字体,同时具有矢量图形的特征,在不同的设备上使用图标的时候就不用加载不同尺寸的图片文件,能够减少 HTTP 请求数,提高页面加载速度. IconVault 这款在线 ...

  8. Sencha Touch 2.2.1 Custom Icon 自定义图标

    ST2.2版本竟然又改变了sass中自定义图标的添加方式,在2.2以前采用的是这种base64的方式,详见:http://www.cnblogs.com/qidian10/archive/2012/1 ...

  9. Delphi 7使用自定义图标关联文件类型

    Delphi 7使用自定义图标关联文件类型 5.2 Delphi编程(40)  版权声明:本文为博主原创文章,未经博主允许不得转载. 在开发过程中,我们经常需要属于自己的文件类型,自定义的后缀名不仅可 ...

随机推荐

  1. Quicklz压缩算法

    以前对压缩算法一无所知,只是知道哈弗曼编码能做这种事情,但是感觉这样的方法奇慢无比.昨天下午看了下号称世界上最快的压缩算法Quicklz,对压缩的基本思路有了一定的了解.一般的压缩程序的要求读入文件之 ...

  2. ETL 循环导入 平面文件

    http://blog.csdn.net/zlp321002/article/details/3413365 ETL设计之-Foreach 循环容器 应用场景: 批量导入某一文件夹下的所有文件.就可以 ...

  3. 最新sublimetext3080注册

    ----- BEGIN LICENSE -----K-20Single User LicenseEA7E-9401293A099EC1 C0B5C7C5 33EBF0CF BE82FE3BEAC216 ...

  4. c/c++面试39-44之内存动态分配

    39 指针的初始化(二叉树排序),其中引入了双向链表 #include <stdio.h> #include <stdlib.h> struct Tag_Node { stru ...

  5. Flutter实战视频-移动电商-41.详细页_数据接口的调试

    41.详细页_数据接口的调试 建立数据模型层,我们的业务逻辑分开,然后进行后台数据的调试 生成model类 json数据: { ", "message": "s ...

  6. eclipse修改某一个项目的字符编码

    eclipse修改某一个项目的字符编码   1 选中要修改编码的文件,鼠标右键,选择[Properties]  2 左侧选中[Resource], 右侧出现[Text file encoding], ...

  7. Jmeter + Junit

    在使用jmeter中Junit的功能之前,最好将接口以手动的方式调通,可以参考 Jmeter之HTTP Request 下面开始讲一下如何使用Junit功能 1.  编写测试类 JmeterJunit ...

  8. D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图

    本章使用路径生成器来绘制一个折线图.以中国和日本的GDP数据为例:   //数据 var dataList = [ { coountry : "china", gdp : [ [2 ...

  9. IntelliJ IDEA的自动提示貌似是区分大小写的,首字母小写的话,怎么都提示不出来。

    IntelliJ IDEA的自动提示貌似是区分大小写的,首字母小写的话,怎么都提示不出来. File>Settings>editor >general >code comple ...

  10. VS2010在WIN7下安装报错“下列组件安装失败”如何解决

    VS2010在WIN7下安装报错“下列组件安装失败”如何解决 http://www.111cn.net/net/42/75914.htm