菜单图标看起来不同于IOS而不是ANDROID - IONIC

Question

使用以下代码在我的离子home.html上添加了三个图标。问题是它们在IOS上看起来非常不合适且尺寸非常小。

<ion-header>

  <ion-navbar color="headercolor" style="height:25px;">
    <ion-title style="text-align:center;font-size:11px;margin-top:20px;">Tags</ion-title>

    <button ion-button (click)="back()" style="background-color:transparent;margin-top:-50px;">
      <ion-icon name="arrow-back" class="icon"  style="color: #ffffff;font-size:20px;"></ion-icon>
    </button>
    <ion-buttons end>
      <button ion-button icon-only (click)="home()">
        <ion-icon name="home" class="icon" style="font-size:16px;"></ion-icon>
      </button>
      <button ion-button icon-only (click)="mailto()">
        <ion-icon name="mail" class="icon"  style="color: #ffffff;font-size:16px;"></ion-icon>
      </button>

      <button ion-button icon-only (click)="msg()">
        <ion-icon name="chatboxes" class="icon" style="color: #ffffff;font-size:17px;" ></ion-icon>
      </button>

      <button ion-button icon-only (click)="close()">
        <ion-icon name="close" class="icon" style="color: #ffffff;font-size:16px;"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

我的代码有什么问题，我该如何解决？

第一个截图是Android，第二个截图是iOS。

Android屏幕截图

iOS屏幕截图

Answer 1

这是ios和android的默认图标，因此如果你想为两个平台使用相同的图标，请使用：md-arrow-round-back

现在Android后退按钮将用于两个平台。 在Android后退按钮中，您可以看到边框。它可以通过box-shadow:none删除。

对齐使用<ion-row> - ＆gt;所有元素都将对齐

要增加图标大小，请使用font-size标记中的icon属性。图标大小也会增加。