如何在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

---

版本5与字体神奇图标的版本4无关。所有重复的内容都是无关紧要的，而且OP已经像V4中应该做的那样更改了颜色，但它并没有起作用。 - Temani Afif

Answer 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;
}

- Temani Afif

---

我该如何将颜色改为渐变色呢？CSS颜色属性不支持渐变。 - devaent

Answer 2

如果您正在使用 Font Awesome 5 的 svg-with-js 版本，则它会将 <i></i> 中的所有内容预处理为一个 <svg>。它指定路径具有 fill="currentColor"，因此您需要以某种方式设置 currentColor 为所需颜色。一种选择是：

svg {color: blue;}

官方文档建议使用内联样式：

官方文档

<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;
}

- duncandoo

Answer 3

如果您正在使用Bootstrap 4，您可以在父级标签中使用任何文本颜色设置。

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

- Holt180