İyonik2/3 - başlık düğmesi simgesi farklı boyutta o zaman otomatik geri düğmesi vardır

Question

NavController kullanırken Ionic'in 2/3 otomatik düğmesini kullanıyorum. Sonra

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

Maalesef simgenin boyutu biraz farklı (küçük) geçerli:

şey değişecek başlığında, düğmeyi eklemek istediğiniz sayfaların birinde

, bu yüzden ekledim Geri düğmesi, İyonik tarafından otomatik olarak eklendi. Bunu CSS ile şekillendirebileceğimi biliyorum ama bir şeyleri kırmaktan korkuyorum (tüm cihazları test edemiyorum).

görüntüsü (Android & iOS ikisi):

Belki farklı düğme sınıfları veya bileşenleri kullanmak gerekir? & simgelerindeki tüm simgelerin boyutunu aynı şekilde nasıl yapabilirim?

Answer 1

Sen simgesi yalnızca yönergesini kullanabilir ve hepsi bu. Bu şekilde geri düğmesi.

<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

Aşağıda gösterildiği gibi icon'un font-size değerini artırmanız yeterlidir.

Not: Dolayısıyla için sayfanızın scss dosyada o olmaz mola başka varsayılan stilleri içinde bu yapıyoruz.

your-page.scss

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

Sonuç:

Answer 3

Simgenize bir next-button sınıfı ekleyin.

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

kesin CSS rules for the back button almak için iyonik kaynak koduna bakınız. Ardından, özel stillerinizi buna göre ekleyin.

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