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: rgb

Solution 1:

First of all: put your JS code in a ready wrapper:

$(document).ready(function(){
  //your code here
});

Second: We use toggleClass to set and unset a class on an object so you have 2 option. 1- change your CSS so in default it get your inactive style and when clicked on it it get the active styling. 2- change the js to check if it has the active class or not so based on THAT statement you decied wheter or not to set one of your classes.

since it seems you don't want to change your styling:

<span><buttonclass="saveHome hoverPulse pan typeReversed"><spanclass="stackIcons"><iclass="iconHeartActive chosenHeartIcon iconOnly"></i><iclass="iconHeartEmpty typeReversed iconOnly"></i></span></button></span><script>
    $(document).ready(function(){
       $( ".chosenHeartIcon" ).click(function() {
        if($(this).hasClass('iconHeartActive')) {
            $( this ).removeClass( "iconHeartActive" );
            $( this ).addClass( "iconHeartInactive" );
        } else {
            $( this ).removeClass( "iconHeartInactive" );
            $( this ).addClass( "iconHeartActive" );
        }

     });
 });
 </script>

Solution 2:

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

<span><buttonclass="saveHomehoverPulsepantypeReversed"><spanclass="stackIcons"><iclass="iconHeartActiveiconOnly"></i><iclass="iconHeartEmptytypeReversediconOnly"></i></span></button></span>//CSSCodebutton{width:100px;height:50px;position:relative;}.iconHeartEmpty::before{content:"\f001";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;/*--adjustasnecessary--*/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;/*--adjustasnecessary--*/color:red;font-size:18px;padding-right:0.5em;position:absolute;top:35%;left:5%;}.hide{display:none;}//Script$(".saveHome").click(function() {
   $(".stackIconsi").toggleClass("hide");
 });