CODEWITHSUNDEEP
ionic-frameworkionic2
raduken
raduken

Reputation: 2129

Ionic v2 how to insert a logo in header

How can Insert a logo in header on ionic v2? 

<ion-header>

  <ion-navbar>
    <ion-title></ion-title>
  </ion-navbar>

</ion-header>

Upvotes: 6

Views: 29126

Answers (3)

Andrew HB
Andrew HB

Reputation: 412

I know this is an old question, and the provided answer is perfectly valid, but it was this question I stumbled across when looking to add my app icon to the left of the page title in each of my Ionic 4 pages.

Because I already had 15 or so pages configured I found the easiest way was to set a style within the global.scss file as shown below, using this approach I didn't have to change any of my existing page components.

You might need to tweak the positioning values in the css depending on the size of your image, but for your reference my logo image was 16px x 16px.

global.scss

ion-header {
    ion-toolbar {
        ion-title {
            background-image: url('./assets/icon/favicon.png');
            background-repeat: no-repeat;
            background-position: 5px 3px;
            padding-left: 27px;
        }
    }
}

Each of my page components already had the following structure, I didn't need to change this but it shows you what the html structure was in my project.

Page Component Html

<ion-header>
    <ion-toolbar>
        <ion-title translate>Label.Snags</ion-title>
    </ion-toolbar>
</ion-header>

Upvotes: 0

user7707780
user7707780

Reputation:

simple as this. use:

<img alt="logo" height="40"   src="img/logo.png" >

and:

<ion-header>
 <ion-navbar>
   <ion-title>
    <img alt="logo" height="40"   src="img/logo.png" > 
   </ion-title>
</ion-navbar>
</ion-header>

Upvotes: 3

Amr.Ayoub
Amr.Ayoub

Reputation: 728

    <ion-header>

  <ion-navbar>
    <ion-title>
<img alt="logo" height="40"   src="img/logo.png" > 
</ion-title>
  </ion-navbar>

</ion-header>

Headers in Ionic have a height of 44px. So, you need to make sure the logo is sized less than that.

.title-image {
    margin-top: 8px;
    height: 27px;
}

Upvotes: 21

Related Questions