Anirban Anirban - 1 month ago 21
CSS Question

Change color of font-awesome star icon

I have a font-awesome star-o icon and onclick I want to set its color to yellow. Can some one help me?

<div id="favourite_star">
<span class="fa-stack fa-lg left">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-fw fa-lg fa-star-o fa-stack-1x favourite_icon" onclick="setLocally()"></i></span>
</div>


I just want the color inside the star to be set yellow. I tried to set it using jquery the color to yellow but it sets only the edges of star to yellow and then I tried with the background-color to yellow then its sets the whole square to yellow.

Answer

You have to change the star class in .star instead of .star-o

So

// HTML
<i class="fa fa-fw fa-lg fa-star-o fa-stack-1x favourite_icon"></i>

// JS
$(".favourite_icon").click(function(){
 $(this).css({"color": "yellow"}).removeClass('fa-star-o').addClass('fa-star');
});