For some reason, I can't change fontawesome icon colors - font-awesome

Question

I have fontawesome called properly in the header:
<link rel="stylesheet" href="css/fontawesome-all.min.css">
and also at the bottom:
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
This is my HTML:
<div class="socials">
<i class="fas fa-envelope"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter-square"></i>
<i class="fab fa-github-square"></i>
</div>
And this is my style/sass:
.socials{
a{
margin-left: 1em;
fill: pink;
transition: .3s;
font-size: 4em;
&:hover{
color: red;
background-color: blue;
}
}
}
I can change the font-size and margin. But for some reason, I can't change the color. I saw that there might be an instance that I have used the SVG version instead and that fill property is the one that should be used, but still to no avail.

Answer 1

if that's you want, then the problem is that you used square icons.
<div class="socials">
<i class="fas fa-envelope"></i>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-github"></i>
</div>
.socials {
a {
display: inline-block;
width: 6rem;
height: 6rem;
font-size: 4rem;
transition: 0.3s;
background: transparent;
text-align: center;
line-height: 6rem;
&:hover {
color: red;
background: blue;
}
}
}