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

【问题标题】：How to change color of icons in Font Awesome 5?如何更改 Font Awesome 5 中图标的颜色？
【发布时间】：2018-02-04 13:17:20
【问题描述】：

我无法使用这些代码为 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;
}

【问题讨论】：

标签： css font-awesome font-awesome-5

【解决方案1】：

Font Awesome 5 使用svg 作为图标，path 内部设置为fill:currentColor，所以只需更改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;
}

【讨论】：

如何将颜色更改为渐变？ CSS color 属性不支持渐变。

【解决方案2】：

如果您使用的是 svg-with-js 版本的 Font Awesome 5，它将获取 <i></i> 中的所有内容并将其预处理为 <svg>。它指定路径有fill="currentColor" 所以，你必须以某种方式将currentColor 设置为你想要的颜色。一种选择是：

svg {color: blue;}

official docs推荐内联样式：

<i class="far fa-edit fa-5x" style="color:blue"></i>

或者，在外部元素之一中设置currentColor。例如：

<div class="bggray2 text-center" style="color: blue;">
  <i class="far fa-edit fa-5x"></i>
</div>

要将其移至 CSS 文件，您可以：

div .bggray2 {
    color: blue;
}

【讨论】：

【解决方案3】：

如果您使用的是 Bootstrap 4，您可以使用标签父级中的 text-'color' 设置。

<div class="bggray2 text-danger">
 <i class="far fa-edit fa-5x"></i>
 </div>

【讨论】：