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版）：

也許我應該用不同的按鈕類或組件？ 如何讓標題中的所有按鈕&圖標大小相同？

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

您只需要增加icon的font-size，如下所示。

注：因此你在你的頁面的scss文件時，它不會突破任何其他默認樣式裏面這樣做。

您-page.scss

.icon[name="arrow-forward"] { 
     font-size: 2.4rem;; //same size of the default back button 
    } 

結果：

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; 
}