how to add a logo to header -bar in ionic

Question

I am trying to add a logo in the center of my header bar using Ionic. Any advise on how to do it?

Here is my code

Answer 1

How about doing something like this:

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

You can have a look at this plunker as well.

Some extra info in their forum.

Answer 2

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

Change the image height and src according to your taste. :)

Answer 3

I have done this simply by the following:

In my template <ion-view title="{{pageTitle}}">

and in my controller $scope.pageTitle = "<img src=\"img/logo-290-90.png\">";

Answer 4

The following can also be done:

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

The following directive is the key:

<ion-nav-title>

Answer 5

Considering that you are using a nav bar, you should use ion-nav-title. Here's an example:

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

Put the desired image in "www/img" folder in your app. Then use the below code in index.html

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