Ionic 2大标签图标在iOS中无法正确显示

时间:2018-07-06 14:51:11

标签: ionic-framework ionic2

我在顶部的标签栏中有一个大图标。当我尝试将图标放大到1.5em左右时,部分消失了。我尝试使.tabbar的高度变大并增加了z-index,但是该图标仍然无法显示-见下图

这在Android上不会发生。该图标的尺寸正确可见

enter image description here

带有iOS较大的iOS标签栏的错误

Tabs.html

<ion-tabs  [ngClass]="my_custom_class" selectedIndex="1" tabsPlacement="top"  no-shadow no-border no-border-top no-border-bottom >
  <ion-tab [root]="tab1Root" tabTitle="" tabIcon="icon-controller-stop" (ionSelect)="changeCustomClass('tabbar_normal')" ></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="" tabIcon="icon-circle" (ionSelect)="changeCustomClass('tabbar_transp')" ></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="" tabIcon="icon-triangle-up" (ionSelect)="changeCustomClass('tabbar_normal')"></ion-tab>
</ion-tabs>

自定义主题/icons.scss

标准离子图标也会出现问题

@font-face {
  font-family: 'icomoon';
  src:  url('../assets/fonts/icomoon.eot?b6z7qh');
  src:  url('../assets/fonts/icomoon.eot?b6z7qh#iefix') format('embedded-opentype'),
    url('../assets/fonts/icomoon.ttf?b6z7qh') format('truetype'),
    url('../assets/fonts/icomoon.woff?b6z7qh') format('woff'),
    url('../assets/fonts/icomoon.svg?b6z7qh#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size:0.55em;
  padding:0.1em;
  z-index: 999999;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ion-ios-icon-circle:before,
.ion-ios-icon-circle-outline:before
 {
  content: "\e900";
  font-size:1.7em;
}

0 个答案:

没有答案