How to Change Color of Icons in Font Awesome 5

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>

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

FontAwesome - Change Icon colours Latex

if you want to use \href, you must load the hyperref package
you are opening one more { than you are closing
if you want to use an icon from fontawsome5, either use \fa<insert name here> or \faIcon{<insert name here>}, e.g. \fGlobe in your case.

\documentclass[border=1cm]{standalone}
\usepackage[dvipsnames]{xcolor}
\usepackage{hyperref}
\usepackage{fontawesome5}

\begin{document}

\begin{minipage}[t]{0.275\textwidth} % 27.5% of the page width for the first row of icons
    \vspace{-\baselineskip} % Required for vertically aligning minipages
    {\color{Blue} \faGlobe \faIcon{globe} \href{someAddress}{someAdd} }\\

\end{minipage}


\end{document}

Sample Image

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

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

Font Awesome 5: Possible to change BACKGROUND-COLOR of icon so it doesn't bleed outside border?

I posed this question to the very helpful Font Awesome support and was directed to use their built-in layering and power transforms to create custom icons.

Note: This solution only works if you're using the SVG + JS version of Font Awesome.

 <span class="fa-layers fa-fw fa-5x">
    <i class="fas fa-triangle" style="color: yellow;"></i>
    <i class="far fa-exclamation-triangle" style="color: black;"></i>
 </span

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.

How to Change Color of Icons in Font Awesome 5