How to use image replace icon tab

ionic-v1
1

i want use ion-tab with icon is a image. how to replace current font icon with a image?
who can help me?

some thing like this

<ion-tab
Img ="img.jpg"></ion-tab>
2

Hey there!

You should check out this thread. A few others have managed to do this by referencing a CSS class that contains a background image - which you would set to your custom image.

1 Like
3

Thank drew,
yes, this way helpful to me.
But if we can change directive and just add other attributes, it’s better, because i’m creating other tab layout based on available layout.
Eg:

<ion-tab
Img ="img.jpg"></ion-tab>
4

Hi everyone!
who can help solve this issues or suggest any solution for that?

5

Hi @hoangloi

Can you try following code structure…

Html–

    <ion-tab title="" icon-on="ion-home" icon-off="ion-home" href="#/tab/home"> 
<ion-nav-view name="tab-home">
</ion-tab>

Css–

.ion-home:before{
content: “”;
}
.ion-home{
background-size: 100% 100%;
background-repeat: no-repeat;
border: none;
}
.ion-home.active{
background-image: url(‘img/img.png’);
}
.ion-home.deactive{
background-image: url(‘img/img.png’);
}

1 Like
6

@shashikant Many thanks for reply.
but i want use {{variables}} for background url. because background will change.
eg

.class-name{
background-image: url({{variables}});
}

but angularjs don’t support and this issues we don’t use ng-style ?

7

Please help. I don’t find any solution for this issue.

8

You cant make it dynamic with CSS. So you should embed that style inline next to the element or within the style tag on the element itself.

9

I tried your method, but its not working, it still shows up as the ion-home icon. Did you ever get this to work?