Change color of font-awesome star icon

Question

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 1

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');
});

Answer 2

Try this:-

 <!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> </head> <body> <i class="fa fa-star" style="font-size:48px;color:yellow"></i> <br> </body> </html>

Or try this

 <!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> </head> <body> <h1>fa fa-star</h1> <i class="fa fa-star"></i> <i class="fa fa-star" style="font-size:24px"></i> <i class="fa fa-star" style="font-size:36px"></i> <i class="fa fa-star" style="font-size:48px;color:yellow"></i> <br> <p>Used on a button:</p> <button style="font-size:24px">Button <i class="fa fa-star"></i></button> <p>Unicode:</p> <i style="font-size:24px" class="fa">&#xf005;</i> </body> </html>

Change color of font-awesome star icon

Question

2 answers

solution1
2 ACCPTED 2016-10-29 18:47:26

solution2
1 2016-10-29 19:00:12

Change color of font-awesome star icon

Question

2 answers

solution1 2 ACCPTED 2016-10-29 18:47:26

solution2 1 2016-10-29 19:00:12

solution1
2 ACCPTED 2016-10-29 18:47:26

solution2
1 2016-10-29 19:00:12