How to Change the Color of Font Awesome's Cog Icon

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;
}

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>

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>

How to change color of font awesome icon

Need to target the right class

 .fa-phone {font-size: 15px;color:#ffffff! Important;}}

Change color of font-awesome icons with React

You can use color props in Fontawesome component. like below

<FontAwesomeIcon icon = "faCaretDown"   color="green"/ >

or else you can use the below,
usually fontawsome inherit colour and css size

<span style="font-size: 48px; color: Dodgerblue;">
    <i class="fas fa-bomb"></i>
</span>

Change color of icon Font Awesome

Try to apply the style to the :before element, where the icon is.

.navbarClass li [class^="fa-"]:before,
.navbarClass [class*=" fa-"]:before {
...
    color: #COLOR;
}

How to change color of Font Awesome icon when menu is open?

to change font-awesome color or background just try this

CSS

.fas:hover {
  background-color: #000;
   color: #fff;
}

JS

var ico = document.getElementsByClassName("fa-ico")[0]
ico.addEventListener('click', function () {
   this.style.color = "red"
})

about closing the menu you can use e.target

Example

var container = document.getElementsByClassName("container")[0]
container.addEventListener('click', function (e) {
   if(e.target.className === "container") {
      this.style.display = "none";
   }
})