Change font colour of FontAwesome icon on hover? [duplicate] - css

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

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 2

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 3

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>