Ionic2 / 3 - 标题按钮图标具有不同的大小，然后自动后退按钮

Question

使用NavController时，我正在使用Ionic的2/3自动按钮。

在其中一个页面上，我想在标题中添加按钮，这会改变一些内容，所以我已经添加了它：

<ion-header>
  <ion-navbar color="orange">
    <ion-title>Test</ion-title>
    <ion-buttons end>
      <button ion-button icon-right clear (click)="openModal()">
        Next <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

不幸的是，图标的大小略有不同（较小），然后由Ionic自动添加后退按钮。 我知道我可以用CSS来设置它，但我害怕破坏它（我无法测试所有设备）。

屏幕截图（Android和iOS）：

也许我应该使用不同的按钮类或组件？ 如何制作所有按钮的尺寸＆amp;标题中的图标是一样的吗？

Answer 1

您可以使用仅限图标的指令以及所有指令。这种方式是后退按钮。

<ion-buttons end>
   <button ion-button icon-right icon-only clear (click)="openModal()">
      Next <ion-icon name="arrow-forward"></ion-icon>
   </button>
</ion-buttons>

Answer 2

您只需要增加font-size的{​​{1}}，如下所示。

注意：因此，您在页面icon文件中执行此操作不会打破任何其他默认样式。

你-page.scss

scss

<强>结果：

Answer 3

在您的图标中添加next-button课程。

<ion-icon name="arrow-forward" class="next-button"></ion-icon>

请参阅离子源代码以获得准确的CSS rules for the back button。然后相应地添加自定义样式。

ion-icon.next-button.icon-ios {
    min-width: 18px;
    font-size: 3.4rem;
    padding-left: inherit;
    text-align: right;    
    display: inline-block;
}

ion-icon.next-button.icon-md {  
    margin: 0;
    padding: 0 6px;
    text-align: right;   
    font-size: 2.4rem;
    font-weight: normal;
}