App Logo In Header

ionic-v1
24

It worked for me. Try removing view-title from template. <ion-view view-title="Profile"> becomes <ion-view>.

25

This is what I did

<ion-view>
    <ion-header-bar align-title="left">
	<img class="title header-image" src="img/home_icons_stix_query.png"></img>
	<a class="title header-text">Query Stix</a>
    </ion-header-bar>
</ion-view>

The ā€˜align-titleā€™ doesnā€™t actually affect anything but the image will stay within the size of the header and will mantain its aspect ratio. This works if you also rotate the screen!

26

is there a way to get the logo to center?

1 Like
27

I use <ion-view view-title="{{ logo }}">
In my controller:
$scope.logo = "<img class='logo-header' src='img/logo.png'>";

Markup generated by Ionic:

<div style="left: 50px; right: 50px;" class="title title-center header-item">
  <img class="logo-header" src="img/logo.png">
</div>

Check the classes title and title-center.

28

This worked for me too! Is there a way to add a link to the title image? My thought was to do something like this where I link the logo to the home page of my app:

<ion-view title='<a ui-sref="home"><img class="title-image" src="img/ldi.png" /></a>'>

But it didnā€™t work. I have also tried:

<ion-view>
    <a ui-sref="home">
        <ion-nav-title>
            <img src="img/ldi.png">
        </ion-nav-title>
    </a>

and it also didnā€™t work. The logo vanished.

UPDATE:
One workaround I found was just to put the logo in the <ion-nav-buttons> tab with the <a ui-sref="home"> tag around the img.

29

I had a font icon to represent my logo.
I did.
HTML:
<ion-nav-buttons side="left"> <button id="logoTop" class="button button-icon zmdi zmdi-phone-msg"></button> </ion-nav-buttons>

CSS:
#logoTop { background-color: #093; padding: 0 3px; /* border-radius: 0 */ }
image

1 Like
30 


.title-image {
    margin-top: 0px;
    height: 27px;
    vertical-align:middle;
}
31

^ I can confirm that worked for me

32

I used your method and it works. Thank you!
In my case I use ionincons and I replaced button with and I gave a color to icon (because it has the same color as header and it was not visibile):

HTML:
<ion-nav-bar>    
    <ion-nav-buttons side="right">
        <i class="ion-android-notifications myHeaderIcon"></i>
    </ion-nav-buttons>
</ion-nav-bar>

CSS:
.myHeaderIcon {
    color: #f3f5f6;
}
33

This is Work for me ā€¦thanks @schuppo

34

hey @schuppo , thanksā€¦

this work for meā€¦

35

Worked like a charm :smile: