Ionic: benutzerdefinierte Symbol im Zurück-Taste - wie?

Question

Hallo ich folgenden Code haben:

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

Welche produziert folgende Ausgabe:

Ich mag würde für das benutzerdefinierte Symbol verwendeten Symbole ändern (48x48 Pixel).

Wie kann ich es richtig in Ionic tun?

Ich versuchte Anweisung in folgendem Thema zu folgen: http://forum.ionicframework.com/t/how-to-use-custom-icons-with-tabs-0-9-26/1628

Aber ohne Glück.

Vielen Dank für jede Beratung.

Answer 1

Exist einfache Möglichkeit, Ihr Problem zu lösen, müssen nur Ihre Js setzen diese:

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

(Siehe $ ionicConfigProvider Dokumentation here)

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

Sie können dieses Beispiel in diesem LINK

ausführen

Eine andere Lösung kann dies (mit nur CSS) sein:

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

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

here dieses Beispiel.

Hinweis: Ein ionischer Blog schlägt in irgendeiner Weise vor, Icon-Fonts zu verwenden, aber von meinem Punkt her ergibt das keinen Sinn, wenn nur wenige Icons vorhanden sind. Bitte lesen Sie diese link.

Ich hoffe, diese Informationen sind nützlich für Sie.

Answer 2

Tun Sie es einfach! :)

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

Verwenden Sie den class = „“ -Attribut Ihr eigenes Symbol zu setzen .. In diesem Fall habe ich die ionen Chevron-links verwendet (um wie Ihr Beispiel zu sein) ..!

Aber wenn Sie zu den Standardtext ändern .. Sie können es anders:

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

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