ionic2 tabs 自定义图标

一、准备资源

tabs icon 的svg格式的矢量图片

二、生成字体样式文件

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

三、使用字体文件

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

修改@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'); }

修改字体的公共样式部分的选择器

原代码

    [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字体库的写法。

字体的引用

.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未被选中时的样式。

将我们的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 自定义图标相关推荐

iview weapp icon组件自定义图标小程序
写小程序图标没有想要的,需要自定义的时候.可以使用阿里巴巴矢量图标库自定义图标. 找到自己需要的,然后先加入购物车,点开购物车选择下载代码,然后解压压缩包. 复制 iconfont.css中的内容,到 ...
elementUI-添加自定义图标
elementui的小图标有限,跟UI给的不一样,这个时候咋办呢?百度走起....参考了两篇博主分享的自定义elementui中的图标和建立图标库,这里主要用到第一种实际中: elementU ...
python图标的演变_把Python脚本生成exe文件并添加版本信息和自定义图标
pyinstaller和py2exe把Python脚本生成exe文件,并添加版本信息和自定义图标. 写了一个查找产品通道号的小程序,目前还没进行异常处理. 以下是程序源码. # -*- coding: ...
更换百度地图图标html,百度地图接口，自定义图标，点击切换图标
这里实现了一个指定地区的地图,自定义图标,点击切换图标 1.[代码][JavaScript]代码 body, html,#allmap {width: 100%;height: 100%;overfl ...
图标插件java_java – Eclipse插件：标记的自定义图标
请参阅bug 260909"markerImageProviders扩展点不起作用"(在阅读this thread后找到) Tod Creasey 2009-01-21 07:32 ...
android自定义工具栏,Android工具栏中的自定义图标
我正在使用支持工具栏中定义一个自定义图标,但唯一显示的图标是左箭头-我尝试以布局和编程方式设置它,但结果是一样的. 这是我的活动 public class MainActivity extends A ...
android百度地图单点定位_Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡...
一.问题描述上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡如图所示: 二. ...
react ant-design自定义图标
ant-design给我们提供的图标不够怎么办呢?答案是我们可以自定义图标. 自定义图标也挺简单的,现在图标推荐用svg格式,那么我们就需要制作svg图片. 下面让我们看看如果制作svg图片吧. 1. ...
react-antd table树形数据默认展开行实现以及自定义图标实现及踩坑(defaultExpandedRowKeys,expandedRowKeys)
前言: 最近在做一个权限管理的后台项目,经常涉及到树形数据展示,就用到了antd,table表格树形数据组件.记录一下使用过程的坑. 环境及配置: antd -3.23.6(大版本为antd 3) ...

ionic2 tabs 自定义图标

ionic2 tabs 自定义图标

一、准备资源

二、生成字体样式文件

三、使用字体文件

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

五、最后来看一下效果

ionic2 tabs 自定义图标相关推荐

最新文章

热门文章