Ionic: biểu tượng tùy chỉnh ở nút quay lại - làm cách nào?

Question

Xin chào tôi đã mã sau:

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

nào sản xuất ra sau đây:

Tôi muốn thay đổi các biểu tượng được sử dụng để biểu tượng tùy chỉnh (48x48 px).

Làm cách nào tôi có thể thực hiện theo đúng cách trong Ionic?

Tôi cố gắng để làm theo hướng dẫn trong chủ đề sau: http://forum.ionicframework.com/t/how-to-use-custom-icons-with-tabs-0-9-26/1628

Nhưng không may mắn.

Rất cám ơn mọi lời khuyên.

Answer 1

Exist cách dễ dàng để giải quyết vấn đề của bạn, chỉ cần đặt trong .js của bạn này:

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

(Xin xem $ ionicConfigProvider tài liệu here)

và css của bạn:

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

Bạn có thể chạy ví dụ này trong LINK

này

Một giải pháp khác có thể này (chỉ sử dụng CSS):

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

và css của bạn:

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

Xem ví dụ này here.

Lưu ý: Blog theo một cách nào đó gợi ý sử dụng phông chữ biểu tượng, nhưng từ quan điểm của tôi không có ý nghĩa khi có ít biểu tượng. Vui lòng đọc số link này.

Tôi hy vọng thông tin này hữu ích cho bạn.

Answer 2

Chỉ cần làm điều đó! :)

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

Sử dụng thuộc tính class = "" để đặt biểu tượng tùy chỉnh của bạn .. Trong trường hợp này, tôi đã sử dụng ion-chevron-left (giống như ví dụ của bạn) ..!

Nhưng nếu bạn muốn thay đổi các văn bản mặc định quá .. bạn có thể làm điều đó khác nhau:

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