How to change icon on active state?

Questions
1

How do I display one icon initially and another one when active?
I know how to do it if I use .png images, but if I only use icons?
Lets say I want to change home to home_fill?
Whats the proper way?

<a href="#view-1" class="tab-link tab-link-active ios-edges">
    <i class="icon f7-icons color-grey tabbar-icon1">home</i>
</a>

If I only want to change the color or a .png of it I use this. But changing the icon?

a.tab-link.tab-link-active > i.tabbar-icon1 {
	color:#F30;
	background-image: url("../../images/icons/more2.png");
}

Thanks.

2 
<a href="#view-1" class="tab-link tab-link-active ios-edges">
    <i class="icon f7-icons color-grey tabbar-icon1">home</i>
    <i class="icon f7-icons color-grey tabbar-icon2">other_icon</i>
</a>

// css
.tab-link.tab-link-active .tabbar-icon1 {
  display: none;
}
.tab-link .tabbar-icon2  {
  display: none;
}
.tab-link.tab-link-active .tabbar-icon2 {
  display: block;
}
3

Thanks, yes ones my grey cells started to work, off course that´s the way to do it haha. Thanks pvallulah

1 Like