How to get a custom icon in a back button?

问题

I have following code:

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

Which producing following output:

I would like to change used icons for the custom icon (48×48 px).

How can I do it in right way in Ionic?

I tried to follow the instructions in this topic, but without luck.

回答1:

Exist easy way to solve your problem, just put in your .js this:

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

(Please see $ionicConfigProvider documentation here)

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

You can run this example in this LINK

Another solution can be this (using only CSS):

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

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

See this example here.

Note: A ionic blog in some way suggests using icon-fonts, but from my point does not make sense when there are few icons. Please read this link.

I hope this information is useful to you.

回答2:

Just do it! :)

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

Use the class="" attribute to set your custom icon.. In this case, i have used the ion-chevron-left (to be like your example)..!

But if you want to change the default text too.. you can do it different:

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

来源：https://stackoverflow.com/questions/27917844/how-to-get-a-custom-icon-in-a-back-button

标签

css

ionic-framework

icons