Raduken Raduken - 6 months ago 49
HTML Question

How to change font-awesome icon color when it is active

How to change font-awesome icon color when it is active, I have a menu with font-awesome links and I would like change the icons colors when is active, some can help on this?

I did read about states: https://smacss.com/book/state but still not working in my code, its a way to make this work? thank you.

jsfiddle: https://jsfiddle.net/oosa8yzk/

my html

<ul>
<li>
<a class="menu" data-toggle="tooltip" data-placement="bottom" title="home">
<i class="fa fa-bars fa-2x" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="search"><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
</li>
</ul>


my sass:

ul {
list-style-type: none;
li {
padding: 10px;
border-top: 1px solid blue;
&:first-child {
border: none;
}
i {
color: black;
&:hover {
color: white;
background-color: blue;
}
}
&:hover {
background-color: blue;
color: white;
}
&:active {
background-color: yellow;
color: black;
}
&:focus {
background-color: red;
color: white;
}
}
}


my css:

ul {
list-style-type: none;
}
ul li {
padding: 10px;
border-top: 1px solid blue;
}
ul li:first-child {
border: none;
}
ul li i {
color: black;
}
ul li i:hover {
color: white;
background-color: blue;
}
ul li:hover {
background-color: blue;
color: white;
}
ul li:active {
background-color: yellow;
color: black;
}
ul li:focus {
background-color: red;
color: white;
}

Answer

Your SCSS

li {
  // active pseudo on li 
  &:active {
    i { color: #your-active-color; }
  }

  a {
    // active pseudo on a link 
    &.active {
      i { color: #your-active-color; }
    }
  }

}

jQuery -

$(document).ready(function() {
  $('li a').on('click', function() {
    $('li a').removeClass('active');
    $(this).addClass('active');
  });
});
Comments