Can I change the color of Font Awesome's icon color?

Question

I have to wrap my icon within an <a> tag for some reason.
Is there any possible way to change the color of a font-awesome icon to black?
or is it impossible as long as it wrapped within an <a> tag? Font awesome is supposed to be font not image, right?

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>

Solution 1

This worked for me:

.icon-cog {
  color: black;
}

For versions of Font Awesome above 4.7.0, it looks this:

.fa-cog {
  color: black;
}

Solution 2

HTML:

    <i class="icon-cog blackiconcolor">

css :

    .blackiconcolor {color:black;}

you can also add extra class to the button icon...

Solution 3

You can specify the color in the style attribute:

<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>

Solution 4

To change the font awesome icons color for your entire project use this in your css

.fa {
  color : red;
}

Solution 5

Try this:

<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">

View more solutions

Comments

[James Donnelly]

possible duplicate of How to style icon color, size, and shadow of Font Awesome Icons

[Zameer Ansari]

Check out this: fortawesome.github.io/Font-Awesome/examples

[HUSTEN]

@Evans Thanks but the problem is I sometime put <i class="icon-cog icon-white"> on the table cell which is black colored. Your css forced to change it into black also:(

[Evan Hahn]

You can add the following: .icon-cog.icon-white { color: white; }

[Adrian Schmidt]

-1 Firstly, this is wrong, because it will change the color of the text also, not just the color of the icon, as requested. Secondly, using inline css should not be promoted.

[Adrian Schmidt]

-1 Font Awesome icons are text, hence the name. They should be colored using css like any other text, not using vendor-specific tricks. Also, since they are text, they are already black-and-white (or mono-color).

[ameya rote]

@AdrianSchmidt Above stated answer is for converting an image to black, I didn't mean to change the font color with this, I hope you are getting me ..

[Adrian Schmidt]

I understand. The answer is still incorrect in regard to the question though. Font Awesome icons are not images, they are text.

[ClarkeyBoy]

Just came across this - I found that adding a class of 'fa' to all icons and then putting .fa {color: green;} did the trick. You can then do .fa.icon-white {color: white;} to get the same effect as you want above.

[vamsikrishnamannem]

Is it possible to change background-color

[Evan Hahn]

@vamsikrishnamannem Yup. You can add background-color: #112233 to the CSS. Check out this code for an example.

[dandrews]

Where does the question say "just the color of the icon" and not the color of the text?

[Adrian Schmidt]

I think that's rather obviously implied by the way the question is phrased. And it seems you would agree, since you updated your answer :)

[eemrah]

I wanna give a small hint for Bootstrap.<i> tag with using text-primary class, override the color of icon as blue. so its good to be aware of it.

[DavidHyogo]

This is nice but changes all the icons in my project. I created classes like .fa-black {color: #000;}. I then added the fa-black classes to the icons where I wanted a different colour.

[DavidHyogo]

This is a nice, neat solution. I prefer to name classes with an fa prefix like fa-black or fa-blue just to make it clear I'm applying them to font awesome icons.

[colidyre]

And where does text-red, text-blue or text-yellow come from?

[Rahul Tathod]

it come from bootstrap classes

[stanlee]

you can also use text-danger instead of text-red, text-warning instead of text-yellow, text-success instead of text-green etc. depends on what you want.

[mr.loop]

@AdrianSchmidt isn't the color style inside the i tag and text outside the i tag

[Adrian Schmidt]

@mr.loop Yes, the answer has been edited since I posted my comment.

[mr.loop]

@AdrianSchmidt ok. didn't noticed