Nav-bar image as title

ionic-v1
1

hi is there a way of setting an image as a nav-bar title ?

2

Like this (?):

<nav-page ng-controller="AppCtrl" title="myTitle">
</nav-page>

app.controller('AppCtrl', function($scope) {
  $scope.myTitle = '<img src="path/to/image.jpeg">';
});
3

no it outputs the html string

4

I’m also interested in the answer to this question - has anyone solved this problem?

5

This did work but title of page becomes <img src=...

6

Use the latest build. Html was not supported in nav-bar, It is fixed now.
http://forum.ionicframework.com/t/html-is-not-supported-in-navbar-title/600

2 Likes
7

If this is not working then open ionic-angular.js file and go to line number 2564 change '<h1 class="title" ng-bind="currentTitle"></h1>' to this '<h1 class="title" ng-bind-html="currentTitle"></h1>'

8

Thanks - it’s working for me now.

1 Like
9

@mrameezraja I’m also searching this info, but, your solution need to be implemented even into the ionic-angular-min file, otherwise don’t work on production environment (if you use minimized version of library). Thank you again for your tip.

10

Hey there!
It’s been a while since someone posted in this topic but i have a problem about putting image in header too.
I want to have something like this:
img view-title

Img should be positioned left and view title should be centered. I can’t make it work :frowning:
I have put img in ion-view or ion-nav-bar but it didnt work.
Any ideas?

EDIT: Did like this:

This way the title isn’t centered but still looks fine. Logo is on the very left and the title (in this case a

) is on the left too but to the right of the logo.

11

You should put image in left button and title as is.

<ion-header>
  <div class="buttons">
    <button>style this button for image</button>
 </div>
 <h2>Your title</h2>
</ion-header>
12

If you’re using beta 14 or later you can simply use the ion-nav-title directive in your view templates.

This gives each view the ability to specify its own custom title element, such as an image or any HTML, rather than being text-only.

1 Like
13

use ion-nav-title

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