fontawesome+jQuery: it doesn't change the "thumb down" icon to the "thumb up"

Vote count:

0

the problem is that jQuery does not change the "thumb down" icon to the "thumb up"

I have tried to change other properties, like color, and even tried to change the "thumb down" icon to the "Github" icon - all these work well, but not "thumb up"

HTML

<button id="change_color">Change color</button>

<button id="change_to_github">Change to Github</button>

<button id="thumbs_up">Thumbs Up!</button><br><br>


<i class="fa fa-thumbs-o-down fa-5x"></i><br><br><br><br>


<!-- Here it works well -->
<i class="fa fa-thumbs-o-up"></i>

jQuery

$("#change_color").click(function(){
    $(".fa-thumbs-o-down").toggleClass("red");
});

$("#change_to_github").click(function(){
    $(".fa-thumbs-o-down").toggleClass("fa-github");
});

$("#thumbs_up").click(function(){
    $(".fa-thumbs-o-down").toggleClass("fa-thumbs-o-up");
});

CSS

.red {
    color: red;
}

here is my code on jsfiddle

appreciate any help,

thanks

asked 1 min ago

skparallax

1

fontawesome+jQuery: it doesn't change the "thumb down" icon to the "thumb up"