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

HtmlCssColorsIconsFont Awesome

Html Problem Overview

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?

enter image description here

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

Html Solutions

Solution 1 - Html

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 - Html

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 - Html

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

.fa {
  color : red;

Solution 5 - Html

Try this:

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

Solution 6 - Html

If you don't want to alter the CSS file, this is what works for me. In HTML, add style with color:

<i class="fa fa-cog" style="color:#fff;"></i>

Solution 7 - Html

To hit only cog-icons in that kind of button, you can give the button a class, and set the color for the icon only when inside the button.


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


.my-nice-button>i { color: black; }

This will make any icon that is a direct descendant of your button black.

Solution 8 - Html

> Is there any possible way to change the color of a font-awesome icon to > black?

Yes, there is. See the snipped bellow">

<!-- Here is what you need to use -->
<a href="/users/edit" class="fa fa-cog" style="color:black"> Edit Profile</a>

> Font awesome is supposed to be font not image, right?

Yes, it is a font. Therefore, you are able to scale it to any size without losing quality.

Solution 9 - Html

With reference to @ClarkeyBoy answer, below code works fine, if using latest version of Font-Awesome icons or if you using fa classes

.fa.icon-white {
    color: white;

And, then add icon-white to existing class

Solution 10 - Html

For me the only thing that worked is inline css + overriding

<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>

Solution 11 - Html

Solution 12 - Html


you write that code in css and it would change the color to white or any color you want, you specify it

Solution 13 - Html

You can change the Font Awesome's icon color with the bootstrap class





Solution 14 - Html

just give it the style whatever you want like

style="color: white;font-size: 20px;"

Solution 15 - Html

You can change the color of a fontawesome icon by changing its foreground color using the css color property. The following are examples:

<i class="fa fa-cog" style="color:white">

This supports svgs also


.parent svg, .parent i{

<div class="parent">
  <i class="fa fa-cog" style="color:white">

Solution 16 - Html

Write this code in the same line, this change the icon color:

<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">

Solution 17 - Html

If you want to change the color of a specific icon, you can use something like this:

.fa-stop {

Solution 18 - Html

Use color property to change the color of your target element as follow :

.icon-cog { // selector of your element
    color: black;

Or in the newest version of font-awesome , you can choose among filled or not filled icons

Solution 19 - Html

It might a little bit tricky to change the color of font-awesome icons. The simpler method is to add your own class name inside the font-awesome defined classes like this:


And target your custom_defined__class_name in your CSS to change the color to whatever you like.

Solution 20 - Html

Open the svg file in vs code or something

change the line

path fill="gray" to what ever color you want! in my case i change it to gray!

Solution 21 - Html


<i class="icon-cog blackiconcolor">

css :

 .blackiconcolor {color:black;}

Using class will give you a free binding property which you can apply on any tag you require.


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHUSTENView Question on Stackoverflow
Solution 1 - HtmlEvan HahnView Answer on Stackoverflow
Solution 2 - HtmlJ.B.View Answer on Stackoverflow
Solution 3 - HtmldandrewsView Answer on Stackoverflow
Solution 4 - HtmlChAnDu353View Answer on Stackoverflow
Solution 5 - HtmlRahul TathodView Answer on Stackoverflow
Solution 6 - HtmlLazaros PapadopoulosView Answer on Stackoverflow
Solution 7 - HtmlAdrian SchmidtView Answer on Stackoverflow
Solution 8 - HtmlGonçalo PeresView Answer on Stackoverflow
Solution 9 - HtmlSategroupView Answer on Stackoverflow
Solution 10 - HtmlCrasherView Answer on Stackoverflow
Solution 11 - HtmlQaan Lee HoongView Answer on Stackoverflow
Solution 12 - HtmlStanjhaeView Answer on Stackoverflow
Solution 13 - HtmlAfeesudheenView Answer on Stackoverflow
Solution 14 - HtmlRahul TathodView Answer on Stackoverflow
Solution 15 - HtmlMohammed Shareef CView Answer on Stackoverflow
Solution 16 - HtmlWarner J Gaitán GuerreroView Answer on Stackoverflow
Solution 17 - HtmlAhmadView Answer on Stackoverflow
Solution 18 - Htmlmohamed ibrahimView Answer on Stackoverflow
Solution 19 - HtmlPepeView Answer on Stackoverflow
Solution 20 - HtmlRaslaView Answer on Stackoverflow
Solution 21 - Htmlameya roteView Answer on Stackoverflow