Image logo in ion-toolbar or ion-navbar

Ionic Framework ionic-v3
1

any way to do this with the version of ionic framework?

2

You can add the image inside of the ion-title tag

2 Likes
3

try this:

<ion-navbar *navbar secondary>
  <img src="logo.jpg" width="40px" style="display:inline-block" height="40px"/>
  <ion-title class="titleicon" style="display:inline-block" >Home</ion-title>
</ion-navbar>

and add this css code inside the app.core.css
.titleicon div{
display:inline-block;
margin-bottom:10px;
}

1 Like
4

okey thaks @kevmax and @mhartington. just time to try this

5

Is it possible to do this with ion-avatar?

6

thanks, it works!!! but iā€™m looking to place it in the middle

7

try

<div class="titleicon">
         <img src="logo.jpg" width="100px" />
    </div>

then

.titleicon {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    text-align:center;
}
2 Likes
9

this work for me cheers !

10

Hi,
I want to show image in ion-header but it is not showing image in ionic header
below is the path of the image

  <ion-header style="height:60px;">
        <div class="toolbar-background-md">
                      
              <img src="assets/icon/tetra_single.png"   style="width: 30px;height: 15px;margin-left: 5px;"  /> 
              <ion-title >
                   Tetra
                   </ion-title> 
</div>
        </ion-header>

So please help me