How to Color The Fontawesome Icon Colors

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

This worked for me:

.icon-cog {
  color: black;
}

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

.fa-cog {
  color: black;
}

How to style icon color, size, and shadow of FontAwesome Icons

Given that they're simply fonts, then you should be able to style them as fonts:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}

Is it possible to color the fontawesome icon colors?

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:

Sample Image

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

How to change color of icons in Font Awesome 5?

Font Awesome 5 uses svg for icons and path inside are set with fill:currentColor so simply change color of svg:

.icons svg { color:#2759AE;}

<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script><div class="container mt200 icons">  <div class="col-md-3">    <div class="bggray2 text-center">      <i class="fas fa-microphone fa-5x"></i>      <div class="title">LOREM</div>      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>    </div>  </div>  <div class="col-md-3">    <div class="bggray2 text-center">      <i class="far fa-edit fa-5x"></i>      <div class="title">LOREM</div>      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.      </div>    </div>  </div></div>

Change Fontawesome icon color

Do you mean add color:white?

i.fa {
  border-radius: 300px;
  box-shadow: 0 0 3px #888;
  padding: 0.7em 0.7em;
  background-color: #06283d;
  color: white;
}

<body>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <i class="fa fa-regular fa-spinner fa-spin fa-5x"></i>

</body>

FontAwesome 5 - Multi color icon

By using gradient for the color and two icons we may achieve this but it remains a hacky way and you need to handle each case (icon + coloration) specifically:

.fa-google path{
  fill:url(#grad1);
}
.fa-google + .fa-google path{
  fill:url(#grad2);
}
.icon {
  display:inline-block;
  position:relative;
}
.fa-google + .fa-google {
   position:absolute;
   left:0;
   top:0;
   clip-path: polygon(0% 0%,120% 0%,0% 75%);
}

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" ></script>
<svg style="width:0;height:0;">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="30%" x2="50%" y2="0%">
      <stop offset="50%" stop-color="#34a853" />
      <stop offset="50%" stop-color="#4285f4" />
    </linearGradient>
    <linearGradient id="grad2" x1="0%" y1="30%" x2="50%" y2="0%">
      <stop offset="50%" stop-color="#fbbc05" />
      <stop offset="50%" stop-color="#ea4335" />
    </linearGradient>
  </defs>
</svg>
<div class="icon"> 
<i class="fab fa-google fa-7x"></i>
<i class="fab fa-google fa-7x"></i>
</div>

How to change the inner white color of Font Awesome's exclamation triangle icon?

The exclamation mark of this icon is a transparent part, so a trick is to add a background behind it to have the needed coloration. Of couse, the background shouldn't cover the whole area so we need to use a gradient to cover only a part of it.

.fa-exclamation-triangle {  background:linear-gradient(red,red) center bottom/20% 84% no-repeat;}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"><i class="fas fa-exclamation-triangle fa-7x"></i><i class="fas fa-exclamation-triangle fa-4x"></i><i class="fas fa-exclamation-triangle fa-2x"></i>

How to change color of Vue 3 font awesome icon?

If you want to use pure CSS then locate it, refer directly to the path and set the fill color.
Right click and inspect with console is the best way to locate elements, but for mor accurate try

<fa icon="bomb" color="#E1FF00" id="my_bomb_icon" size="lg"/>

and in the css (if inline color property don't work) add

#my_bomb_icon path {
    fill: #E1FF00
}

Alternatively, you can try to add the color as a direct property, then you will create the icon like so
<fa color="red" icon="bomb"></fa>. Also if you need a specific color then set the hex code <fa color="#3caa0c" icon="bomb"></fa>

How do I change the color of font awesome icon on hover?

so, I figured out the answer. If I download the icon, it turns into an SVG image, and there's no way to change the color. I have to connect the font awesome kit to my code in order to use the icons properly. Thanks for all your help though.