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

HTML:

    <i class="icon-cog blackiconcolor">

css :

    .blackiconcolor {color:black;}

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

---

You can specify the color in the style attribute:

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

---

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

.fa {
  color : red;
}

---

Try this:

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

---

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>

---

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.

HTML:

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

CSS:

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

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

---

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

Yes, there is. See the snipped bellow

Edit Profile

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.

---

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

---

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

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

---

just give and text style whatever you want like :D HTML:

<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
   <span style="color:black;">Text Name</span>
</a>

---

.fa-search{
    color:#fff;
 }

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

---

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

use

text-color

example

text-white

---

just give it the style whatever you want like

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

---

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

<style>
.fa-cog{
color:white;
}
</style>

<style>
.parent svg, .parent i{
color:white
}
</style>

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

---

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

---

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

---

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

.fa-stop {
    color:red;
}

---

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.

---

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!

---

Sometimes changing the colour in the external css file doesn't work. You can add inline css property in the icon tag and that will work.

For example

---

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.

---