CODEWITHSUNDEEP
cssfont-awesomefont-awesome-5
Ed Joe
Ed Joe

Reputation: 317

How to change color of icons in Font Awesome 5?

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

Upvotes: 24

Views: 59256

Answers (4)

cartoon
cartoon

Reputation: 9

From Font Awesome documentation (https://docs.fontawesome.com/web/style/basics)

Font Awesome icons automatically inherit CSS size and color (as seen in the examples below). This means they blend in with text inline wherever you put them. Font Awesome tries not to be too opinionated, and sets just the basic styling rules icons needed to render properly in context.

<span style="font-size: 3em; color: Tomato;">
  <i class="fa-solid fa-camera"></i>
</span>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272648

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:

enter image description here

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

Upvotes: 31

Holt180
Holt180

Reputation: 17

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>

Upvotes: 0

duncandoo
duncandoo

Reputation: 323

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

Upvotes: 11

Related Questions