cách thêm biểu tượng vào tiêu đề -bar trong ionic

Question

Tôi đang cố gắng thêm biểu trưng ở giữa thanh tiêu đề của tôi bằng cách sử dụng Ionic. Bất kỳ lời khuyên nào về cách làm điều đó?

Đây là mã của tôi

<ion-nav-bar class="bar-light"> 
<!--Logo--> 
<ion-nav-buttons > 
<img class="title" src="https://s3-us-west 2.amazonaws.com/s.cdpn.io/139144/sp_symbol_option2_1.png"> 
</ion-nav-buttons> 
<ion-nav-buttons side="left"> 
<!--Left icons--> 
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"> 
</button></ion-nav-bar> 

Answer 1

Làm thế nào về làm một cái gì đó như thế này:

<ion-header-bar align-title="center" class="bar-positive"> 
    <div class="buttons"> 
    <button class="button" ng-click="doSomething()">Left Button</button> 
    </div> 
    <h1 class="title"><img class="title-image" src="http://www.ionicframework.com/img/ionic-logo-white.svg" width="123" height="43" /></h1> 
    <div class="buttons"> 
    <button class="button">Right Button</button> 
    </div> 
</ion-header-bar> 

Bạn có thể có một cái nhìn tại plunker này là tốt.

Một số thông tin bổ sung trong forum của chúng.

Answer 2

Tôi đã làm điều này đơn giản bằng cách sau:

Trong mẫu của tôi <ion-view title="{{pageTitle}}">

và trong điều khiển của tôi $scope.pageTitle = "<img src=\"img/logo-290-90.png\">";

Answer 3

Xét rằng bạn đang sử dụng một thanh điều hướng, bạn nên sử dụng ion- nav-title. Dưới đây là một ví dụ:

<ion-nav-bar align-title="center"> 
</ion-nav-bar> 
<ion-nav-view> 
    <ion-view> 
    <ion-nav-title> 
     <img src="logo.svg"> 
    </ion-nav-title> 
    <ion-content> 
     Some super content here! 
    </ion-content> 
    </ion-view> 
</ion-nav-view> 

Answer 4

<ion-view> 
    <ion-nav-title> 
      <img alt="Company Logo1" height="40" src="img/logo-07.png"> 
      <img alt="Company Logo2" height="40" src="img/logo-08.png"> 
    </ion-nav-title> 
</ion-view> 

Thay đổi chiều cao hình ảnh và src theo khẩu vị của bạn. :)

Answer 5

Đặt hình ảnh mong muốn trong thư mục "www/img" trong ứng dụng của bạn. Sau đó sử dụng đoạn mã sau trong index.html

<h1 class="title"><img class="title-image" src="img/mylogo.png" width="123" height="43" /></h1> 

Answer 6

Sau đây cũng có thể được thực hiện:

<ion-view id = "yourHeader"> 
    <ion-nav-title> 
     <div id = "title">YOUR TITLE</div> 
     <img src="img/Message.png" class = "peers_msg_img"> 
     <img src="img/Notification.png" class="peers_profile_img"> 
     <img src="img/Peers.png" class="peers_alert_img"> 
    </ion-nav-title> 
    <ion-content> 
     //Some Content 
    </ion-content> 
</ion-view> 

Chỉ thị sau là chìa khóa:

<ion-nav-title>