Ionico: icona personalizzata nel pulsante Indietro - come?

Question

Ciao Ho seguente codice:

<ion-nav-buttons side="left"> 
    <button class="button button-icon icon ion-chevron-left" ng-click="goBack()" ></button> 
</ion-nav-buttons> 

che producendo seguente output:

vorrei cambiare le icone utilizzate per l'icona personalizzata (48x48 px).

Come posso farlo in modo corretto in Ionic?

Ho cercato di seguire le istruzioni nella seguente argomento: http://forum.ionicframework.com/t/how-to-use-custom-icons-with-tabs-0-9-26/1628

Ma senza fortuna.

Molte grazie per qualsiasi consiglio.

Answer 1

Exist modo semplice per risolvere il problema, basta mettere nel vostro .js questo:

$ionicConfigProvider.backButton.icon('my-back-button'); 

(Si prega di consultare la documentazione $ ionicConfigProvider here)

e il vostro css:

.my-back-button { 
content: url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/black-ink-grunge-stamps-textures-icons-arrows/003683-black-ink-grunge-stamp-textures-icon-arrows-double-arrowhead-left.png'); 
width: 35px; 
} 

È possibile eseguire questo esempio in questo LINK

Un'altra soluzione può essere questo (utilizzando solo i CSS):

<ion-nav-back-button class="button-clear"> 
    <i class="button button-icon my-back-button"></i> 
    </ion-nav-back-button> 

e il vostro css:

.my-back-button { 
content: url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/black-ink-grunge-stamps-textures-icons-arrows/003683-black-ink-grunge-stamp-textures-icon-arrows-double-arrowhead-left.png'); 
width: 48px; 
} 

Vedi questo esempio here.

Nota: un blog ionico suggerisce in qualche modo l'utilizzo di caratteri di icona, ma dal mio punto non ha senso quando ci sono poche icone. Si prega di leggere questo link.

Spero che questa informazione ti sia utile.

Answer 2

Fallo e basta! :)

<ion-nav-back-button class="button-clear ion-chevron-left"> 
</ion-nav-back-button> 

Usare il class = "" l'attributo per impostare la vostra icona personalizzata .. In questo caso, ho usato l'ione-chevron-sinistra (per essere come il tuo esempio) ..!

Ma se si desidera modificare il testo predefinito troppo .. si può fare diverso:

<ion-nav-back-button class="button-clear"> 
    <i class="ion-chevron-left"></i> Back Text 
</ion-nav-back-button> 

Rif: http://ionicframework.com/docs/api/directive/ionNavBackButton/