How to put title and logo in header

ionic-v1
1

i have used his code but it only displays the logo not the title. How to get both together?

    <ion-view view-title="All Tips" hide-back-button="true">

<ion-nav-title>

  <img class="title-image" src="img/dsdlogo.png">
</ion-nav-title>
1 Like
2

try this code

<ion-view view-title="<img class='title-image' src='img/dsdlogo.png'><div>this is title</div>" hide-back-button="true">
3

same result is there
only image displays not title

4

read this: http://ionicframework.com/docs/api/directive/ionNavTitle/

    <ion-nav-bar>
</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>
5

With this only logo is coming

6

Change @chnbohwr’s div to a span or put it in the ion-nav-title as a span:

<ion-nav-title>
     <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/256302/ionic-logo-white.png' height='44'><span>this is the title</span>
</ion-nav-title>
7

It doesn’t work if you have a title in your view.
Have a look at this plunker.

8

Because the view-title overrides the ion-nav-title. If you wanted the logo on that particular view you would put it in ion-nav-title under the ion-view:

<ion-view>
    <ion-nav-title>
        <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/256302/ionic-logo-white.png' height='44'><span>home</span>
    </ion-nav-title>

If you want the logo on every page you could put it in the ion-nav-buttons or just put an ion-nav-title on every page, but I don’t think there’s an official way to keep the logo in the title and change the text on each view.

9 
 <ion-view title="mytitle">
        <ion-nav-bar class="bar-positive ">
           <ion-nav-buttons side="left">
                <img class='title-image' src='img/logo.png' >
            </ion-nav-buttons>
			<ion-nav-buttons side="right">
                <button class="button button-icon button-clear ion-ios-gear-outline">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
</ion-view>