无法更改 Font Awesome 图标颜色

Question

我对必须仅在媒体查询中看到的 <i> 元素有疑问。问题是我可以看到在我的检查器中一切正常，但是尽管 <i> 采用了正确的字体大小，并且采用了正确的 space，但它没有采用我给它的颜色。检查员甚至显示正确的颜色没有问题，但元素不接受它，它采取了该部分的背景颜色，导致无法看到。

我要在媒体查询中显示的是id="footer-left-options"，上面另外两个不是

这里有一些代码可以提供帮助

/*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">
      <a href="#">Brano nome</a>
    </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

/*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">
      <a href="#">Brano nome</a>
    </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 2

问题是字体粗细，因为 <i> 继承了之前规则的 font-weight:500：

.footer-icon-left>i {
  color: #797979;
  font-size: 16px;
  font-weight: 500;
  padding-right: 10px;
  cursor: pointer;
}

感谢这个网站 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 并打开 link 您可以看到该图标被描述为“纯色”并且有两个专业版，分别为“常规”和“浅色”字体-重量。现在，由于 500 不是纯色（粗体），图标采用了我想要的颜色，但根本没有显示！将 font-weight 更改为 font-weight:800 问题解决，图标正常显示，颜色正确。

谢谢大家的帮助！

无法更改 Font Awesome 图标颜色

cant change FontAwsome icon color

html

css

font-awesome