cant change FontAwsome icon color - html

Question

I have a problem with an <i> element that must be seen only in a media query. The problem is I can see everything works fine in my inspector, but despite <i> takes the right font-size, and takes the right space, it doesn't take the color I gave it. The inspector even shows the right color without problems, but the element doesn't take it, it takes the background color of the section, making it impossible to be seen.
The one I want to show in the media query is id="footer-left-options", the other two above not.
Here some code to help
/*footer-left*/
.footer-section-left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.footer-album-cover {
width: 50px;
min-width: 40px;
cursor: pointer;
}
.footer-album-cover img {
width: 100%;
}
.footer-album-info {
margin-left: 10px;
margin-right: 30px;
cursor: pointer;
}
.footer-album-info-artist a {
font-size: 10px;
color: #8d8d8d;
text-decoration: none;
}
.footer-album-info-artist a:hover {
text-decoration: underline;
}
.footer-icon-left>i {
color: #797979;
font-size: 16px;
font-weight: 500;
padding-right: 10px;
cursor: pointer;
}
.footer-icon-left>i:hover {
color: white;
}
#footer-left-options {
display: none;
}
#media all and (max-width: 532px) {
.footer-section-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.footer-album-cover {
width: 30px;
min-width: 30px;
}
.footer-album-info {
margin-left: 0;
margin-right: 0;
}
.footer-icon-left>i {
display: none;
}
#footer-left-options {
padding-right: 0;
display: block;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<!--footer-left-->
<div class="footer-section-left">
<div class="footer-album-cover">
<img src="img/sinister.jpeg" alt="Sinister">
</div>
<div class="footer-album-info">
<div class="footer-album-info-title">Sinister</div>
<div class="footer-album-info-artist">
Brano nome
</div>
</div>
<div class="footer-icon-left">
<i class="far fa-heart"></i>
<i class="far fa-folder"></i>
<i id="footer-left-options" class="fas fa-ellipsis-h"></i>
</div>
</div>

Answer 1

The problem is the font-weight, since the <i> inherited the font-weight:500 from the previous rule:
.footer-icon-left>i {
color: #797979;
font-size: 16px;
font-weight: 500;
padding-right: 10px;
cursor: pointer;
}
Thanks to this site https://www.amp-blogger.com/2019/01/font-awesome-5-not-working-on-css.html I've found the answer. The <i> I've token from Font Awesome was this https://fontawesome.com/icons/ellipsis-h?style=solid and opening the link you can see that the icon is described as "solid" and has two pro version both in "regular" and "light" font-weight. Now, since 500 isn't solid (bold), the icon took the color I wanted for it, but didn't display at all! Changing font-weight to font-weight:800 solves the problem, the icon shows itself regularly and the color is correct.
Thanks everybody for the help!

Answer 2

/*footer-left*/
.footer-section-left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.footer-album-cover {
width: 50px;
min-width: 40px;
cursor: pointer;
}
.footer-album-cover img {
width: 100%;
}
.footer-album-info {
margin-left: 10px;
margin-right: 30px;
cursor: pointer;
}
.footer-album-info-artist a {
font-size: 10px;
color: #8d8d8d;
text-decoration: none;
}
.footer-album-info-artist a:hover {
text-decoration: underline;
}
.footer-icon-left>i {
color: #797979;
font-size: 16px;
font-weight: 500;
padding-right: 10px;
cursor: pointer;
}
.footer-icon-left>i:hover {
color: red;
}
#footer-left-options {
display: none;
}
#media all and (max-width: 532px) {
.footer-section-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.footer-album-cover {
width: 30px;
min-width: 30px;
}
.footer-album-info {
margin-left: 0;
margin-right: 0;
}
#footer-left-options {
padding-right: 0;
display: block;
}
}
<script src="https://kit.fontawesome.com/f10f36656a.js" crossorigin="anonymous"></script>
<!--footer-left-->
<div class="footer-section-left">
<div class="footer-album-cover">
<img src="img/sinister.jpeg" alt="Sinister">
</div>
<div class="footer-album-info">
<div class="footer-album-info-title">Sinister</div>
<div class="footer-album-info-artist">
Brano nome
</div>
</div>
<div class="footer-icon-left">
<i class="far fa-heart"></i>
<i class="far fa-folder"></i>
<i id="footer-left-options" class="fas fa-ellipsis-h"></i>
</div>
</div>