CODEWITHSUNDEEP
jquerycssfont-awesome
coder231
coder231

Reputation: 463

Unable to toggle fontawesome color

I am not able to toggle the color of fontawesome icon on clicking it.

 <a id="thumbsup">@Html.FontAwesome(FontAwesomeIconSet.ThumbsUp, FontAwesomeStyles.Large2x)</a>

When the icon is loaded, I want that to be gray. When clicked, it should be blue. When clicked again, it should be back to gray. (the icon itself is black in color). Can we not toggle between two colors on a fontawesome icon otherthan its original color?

When I try to toggle between the original black color and blue by using toggleclass, it works fine. 

 //jquery
 $("#thumbsup").toggleclass("bluecolor");
 //css
 .bluecolor{
 color:#0026ff;
 }

But if I try to make it gray initially, by adding a class to html, it loads as gray but not toggling to blue when using 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 the above logic on a plain text, it is toggling perfectly.Is it not working as fontawesome itself is loaded as class? Is there an alternate way to achieve this ?

Upvotes: 0

Views: 895

Answers (2)

Ted
Ted

Reputation: 14927

Its toggleClass not toggleclass. Run the snippet below and click the link.

$("#thumbsup").click(function(e){
    $("#thumbsup").toggleClass("bluecolor");
});
.graycolor{
    color:#999;
 }
.bluecolor{
    color:#0026ff;
 }
<a href="#" id="thumbsup" class="graycolor"><i class="fa fa-2x fa-thumbs-up"></i> Thumbs Up!</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Upvotes: 1

taxicala
taxicala

Reputation: 21769

You have to specify both classes in toggleClass:

$("#thumbsup").toggleClass("bluecolor graycolor");

Upvotes: 2

Related Questions