Anirban Anirban - 9 months ago 72
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>

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 Source

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


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

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