我在顶部的标签栏中有一个大图标。当我尝试将图标放大到1.5em左右时,部分消失了。我尝试使.tabbar
的高度变大并增加了z-index,但是该图标仍然无法显示-见下图
这在Android上不会发生。该图标的尺寸正确可见
带有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;
}