Custom tabbar icons that change state when selected

Questions
1

How can i have custom icons using png’s in a tabbar?
And when a tab is selected how can I make the image change?

2

Using custom icon elements with custom styles, where you specify icon background-image (in your CSS) based on its condition (active or not) - based on tab-link-active class

3

ok that sounds great there is a solution. Thanks for that :slight_smile:
but is it possible to get some example code?

I’ve tried some things but I find that my active icon won’t “stick” meaning that when I touch I can see it change to the alternative png but as soon as I untouch it returns to the original png! The now active tab I’ve switched to still displays the inactive png!

4

Would be good to see what you have tried

5

OK this is what I have…

i.icon.myicon { width: 32px; height: 32px; background-image: url(“icon1.png”); }
i.icon.myicon:active { width: 32px; height: 32px; background-image: url(“icon2.png"); }

So when you touch on the tab it changes to icon2.png but as soon as you release it goes back to icon1.png

6

…
based on tab-link-active class
…

so you should change your code to:

i.icon.myicon { width: 32px; height: 32px; background-image: url(“icon1.png”); }
i.icon.myicon.tab-link-active { width: 32px; height: 32px; background-image: url(“icon2.png"); }
1 Like
7

Correct selector should be

.tab-link-active i.icon.my-icon
8

YES. awesome! thank you both guys for your help. All good now :slight_smile: