How to change color of icons in Font Awesome 5?

Question

I can't colorize the Font Awesome 5 icons using these codes. I tried fill css property for setting color but it didn't work.

HTML Code:

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

CSS Code:

.icons i {
  color: #2759AE;
}

Answer 1

If you're using the svg-with-js version of Font Awesome 5 it takes everything in the <i></i> and preprocesses it into an <svg>. It specifies that the path has fill="currentColor" So, you have to set currentColor to the colour you want somehow. One option is:

svg {color: blue;}

The official docs recommend inline style:

<i class="far fa-edit fa-5x" style="color:blue"></i>

Or, set currentColor in one of the outer elements. For example:

<div class="bggray2 text-center" style="color: blue;">
  <i class="far fa-edit fa-5x"></i>
</div>

And to move it to the CSS file, you could:

div .bggray2 {
    color: blue;
}

Answer 2

Regular way: as suggested on documentation:

<span style="font-size: 3em; color: #ccc;">
  <i class="fas fa-igloo"></i>
</span>

Similarly you can use style tag inside your i tag:

<i class="fas fa-igloo" style="color: #ccc;"></i>

Other way: If you want to target all icons at once using normal css-fontawesome and not the SVG one you have this option as well:

We can add css for color using below class to below classes.

i.fas, i.fab, i.far, i.fal {
   color: #ccc;
}

What's changed with 5.x:

The versions < 5.x were using basic fa fa-icon-name classes to apply icon on i tag. With 5.x FontAwesome has modularized the classes a little bit so we do not have fa now instead we have separate class for solid, regular and brand icons. example:

Solid Style (fas) - <i class="fas fa-clock"></i>

Regular Style (far) - <i class="far fa-clock"></i>

Light Style (fal) - <i class="fal fa-clock"></i>

Brand Style (fab) - <i class="fab fa-clock"></i>

clock is used as an example, use icon-name instead.

Answer 3

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>

As you can see in the code, the i are replaced with svg when you load the JS version:

---

You can apply color to i in case you are using the CSS version.

.icons i {
 color:#2759AE;
}

<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"><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>

So to make sure it will work in all the cases simply use both selector:

.icons i,.icons svg {
   color: #2759AE;
}

Answer 4

If you are using Bootstrap 4 you can use and of the text-'color' settings in the parent of the tag.

<div class="bggray2 text-danger">
 <i class="far fa-edit fa-5x"></i>
 </div>