CODEWITHSUNDEEP
cssfont-awesome
jqed
jqed

Reputation: 540

Is it possible to color the fontawesome icon colors?

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 

<i class="icon-star-empty icon-large"></i>

but I want it to be yellow.

Edit: The use case is that I want a "favorite" icon to be outline of grey, on click, the outline becomes orange, fill to yellow.

Upvotes: 39

Views: 90173

Answers (7)

Ben
Ben

Reputation: 2033

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

Upvotes: 1

Prashanth Sams
Prashanth Sams

Reputation: 21169

if you use, reactjs and under components

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

Upvotes: 0

Abdul Rehman
Abdul Rehman

Reputation: 1794

Extending to the above answers, sometimes you want to add stroke/border to the font/icon. In that case the following is presented.

At least in WebKit. Example:

h1 {
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

Or shorthand:

h1 {
  -webkit-text-stroke: 1px black;
}

The stroke works in WebKit but disappears in other browsers! Alternative? We can use the text-shadow property and simulate a stroke.

h1 {
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

We use four shadows, each 1px offset of black with no spread, one each to the top right, top left, bottom left, and bottom right.

The only holdout would be IE9 and down, which of course you can use IE specific CSS to account for.

P.S. For my own reference as well.

Source: Link

Upvotes: 1

Brynn Bateman
Brynn Bateman

Reputation: 769

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.

Upvotes: 7

Milo Mora
Milo Mora

Reputation: 61

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.

Upvotes: 6

Lucas Lim
Lucas Lim

Reputation: 515

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;

Upvotes: 12

nickhar
nickhar

Reputation: 20913

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:

enter image description here

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 that provides a way to animate changes to CSS properties instead of having the changes take effect instantly and or in combination with .

Upvotes: 84

Related Questions