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

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>

HTML:

    <i class="icon-cog blackiconcolor">

css :

    .blackiconcolor {color:black;}

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

Try this:

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

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

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.

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

.fa-stop {
    color:red;
}

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>

.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

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.

You can specify the color in the style attribute:

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

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

use

text-color

example

text-white

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.

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

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

just give it the style whatever you want like

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

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

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

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

.fa {
  color : red;
}

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>

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>

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

Yes, there is. See the snipped bellow

<!-- Assuming that you don't have, this needs to be in your HTML file (usually the header) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- 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.