Khanh Luong Van Khanh Luong Van -4 years ago 153
Ajax Question

How to change color when click icon in css

I'm facing about the problem of change color when click on icon heart in css and jquery

css:

when not yet click icon

.iconHeartInactive::before {
content: '\e841';
color: rgba(71,78,82,.4);
}


when clicked icon:

.iconHeartActive::after{
content: '\e845';
color: #ed1b77;
}


HTML:

<span>
<button class="saveHome hoverPulse pan typeReversed">
<span class="stackIcons">
<i class="iconHeartActive iconOnly"></i>
<i class="iconHeartEmpty typeReversed iconOnly"></i>
</span>
</button>
</span>
<script>
$( "iconHeartInactive" ).click(function() {
$( this ).toggleClass( "iconHeartActive" );
});
</script>


How can I click on icon and it change color? thank so much !

Answer Source

1 Fiddle Link http://jsfiddle.net/JfGVE/2029/

<span>
<button class="saveHome hoverPulse pan typeReversed">
    <span class="stackIcons">
        <i class="iconHeartActive iconOnly"></i>
<i class="iconHeartEmpty typeReversed iconOnly"></i> 
    </span>
</button>
</span> 



//CSS Code

button{
  width: 100px;
  height: 50px;
  position: relative;
}

 .iconHeartEmpty::before{
   content: "\f001";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 35%;
    left: 5%;
 }
 .iconHeartActive::after{
      content: "\f001";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: red;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 35%;
    left: 5%;
 }
 .hide{
   display: none;
 }



//Script

 $( ".saveHome" ).click(function() {
   $(".stackIcons i" ).toggleClass( "hide" );
 });
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download