I am struggling to change the color of a fontawesome icon when it is clicked.
<a id="thumbsup">@Html.FontAwesome(FontAwesomeIconSet.ThumbsUp, FontAwesomeStyles.Large2x)</a>
My goal is to have the icon start off as gray, turn blue when clicked, and then return to gray when clicked again (the original color of the icon is black). Is there a way to switch between these two colors on a fontawesome icon other than its default color?
When I attempt to toggle between the original black color and blue using toggleclass in jQuery, it works properly.
//jquery
$("#thumbsup").toggleclass("bluecolor");
//css
.bluecolor{
color:#0026ff;
}
However, if I try to set the initial color as gray by adding a class in the HTML, the icon appears gray but does not toggle to blue when clicked with jQuery.
//html
<a id="thumbsup" class="graycolor">@Html.FontAwesome(FontAwesomeIconSet.ThumbsUp, FontAwesomeStyles.Large2x)</a>
//css
.graycolor{
color:#999;
}
//jquery
$("#thumbsup").toggleclass("bluecolor");
When I apply this logic to plain text, the toggling works perfectly. Could it be that it doesn't work on fontawesome icons because they are loaded as classes? Is there another method to achieve this effect?