如何更改 Font Awesome 5 中图标的颜色？

Question

我无法使用这些代码为 Font Awesome 5 图标着色。我尝试了 fill 用于设置颜色的 css 属性，但它没有用。

HTML 代码：

 <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 代码：

 .icons i {
  color: #2759AE;
}

原文由 Ed Joe 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

正如您在代码中看到的，当您加载 JS 版本时， i 被替换为 svg ：

---

如果您使用的是 CSS 版本，您可以将颜色应用于 i 。

 .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>

因此，为了确保它在所有情况下都能正常工作，只需使用两个选择器：

 .icons i,
.icons svg {
   color: #2759AE;
}

原文由 Temani Afif 发布，翻译遵循 CC BY-SA 4.0 许可协议