Is it possible to color the fontawesome icon colors?

Question

I can change fontcolor, but not the \"fill\". I first tried setting background-color, but that fills the whole icon box area.

For example, I have

Answer 1

if you use, reactjs and under components

<i className="icon-star-empty icon-large" style={{color: "grey", fontSize: "70px"}}></i>

Answer 2

Font-awesome comes with a number of both outlined and filled icons. The star is one of them.

There are four different star icon classes that you can use:

class="icon-star"
class="icon-star-empty"
class="icon-star-half"
class="icon-star-half-empty"

If you're a glass-half-full type of person, you can also use the alias for 'icon-star-half-empty':

class="icon-star-half-full"

You can colour the font-awesome icons and use different effects to achieve what you're looking for:

<i class="icon-star-empty icon-large icon-a"></i><br><br>
<i class="icon-star-empty icon-large icon-b"></i><br><br>
<i class="icon-star icon-large icon-c"></i> or <i class="icon-star icon-large icon-d"></i>

Where the following CSS is used (rather than using inline styles):

.icon-a {
    color: #888;
} 
.icon-b {
    color: orange;
}
.icon-c {
    color: yellow;
}
.icon-d {
    color: yellow;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: orange;
}

You can also substitute/set the size too, if you don't want to use icon-large.

The above code outputs the following:

but I've put the above code and a few more options in a JSFiddle, which you can look at here.

It's also possible to use css-transitions that provides a way to animate changes to CSS properties instead of having the changes take effect instantly and or in combination with javascript.

Answer 3

The problem with "-webkit-text-stroke" is that is not fully supported by FF and IE, so what I do in this case is to use the half star in a pseudo class inside of the normal star, something like this:

.icon-star.red-border {
    position: relative;
    color: blue;
    font-size: 24px;
}

.icon-star.red-border:after {
    content: "\f006";
    color: red;
    position: absolute;
    left: 0;    
}

And works for me, here is the fiddle

Thanks.

Answer 4

All you need is to set color: yellow. Because the icons are a font, they will take whatever colour you'd set to any other font (text) in the same way.

if you want to fill the whole star as yellow, try icon-star instead of icon-star-empty

you can try this

-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;

to add stroke (outline) to the font itself. I hope thats what you are looking for.

and to fill it just use the normal

color: yellow;

Answer 5

I recently did this with very simple CSS using only a single font-awesome icon. These icons are rendered as an SVG.

How it works is I'm using the solid/filled icon but turning it white and adding a black border to make it look empty. Upon clicking it, I can toggle the .fill class to change the color to gold, making it solid.

HTML:

<i class="fas fa-star"></i>

CSS:

.fa-star {
    stroke: #000;
    stroke-width: 30px;
    color: white;
    cursor: pointer;
}

.fa-star.fill {
     color: #ffd700 /* gold */
}

JS for toggle using jQuery:

$('body').on('click', ".fa-star", function () {
     favorite(this);
});

function favorite(item) {
     $(item).toggleClass("fill");
}

Answer 6

If you came here like I did wanting a way to have a separate "fill" color for an icon than the font color (for example, the "F" of the Facebook icon is transparent and shows whatever the background is below it), here's your answer:

<p class="fa-stack fa-lg">
    <i class="fa fa-square fa-stack-2x fa-2x fa-inverse"></i>
    <i class="fa fa-facebook-square fa-stack-2x fa-2x"></i>
</p>

You take the regular rounded square and stack it under the icon you want visible. If you want it to be white, you can specify fa-inverse assuming your default is black. More info here.