Can an Avatar be placed inside a nav bar?


Hi Guys

Need some advise on placing Avatar within Nav Bar.
Here is what I am currently trying:

<ion-nav-bar class="bar-positive">

      <div class="item item-avatar">
            <img src="src">

This is how it currently look like: Notice how the image is partially hanging below the nav bar.

Any help would be appreciated.

Thanks in advance!



You can do it with something like this.
<img class='nav-avatar' src="src">


img.nav-avatar{ height: 35px; width: 35px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }


This is really helpful…
I hope you can now help me get rid of the text “Back” appearing next to the image.

Thank You!


in your app.js you can add configuration to remove the text.

template: ‘<ion-nav [root]=“rootPage”>’,
config: {
backButtonText: ‘’

view here for more config options


@MagicAardvark the solution that you gave is for ionic 2.
And for ionic 1 he can add this to app.js file:


@haytam thanks this worked.