Css 如何更改字体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>

---

Font Awesome 5使用

svg

作为图标，并且

path

内部设置了

fill:currentColor

，因此只需更改

svg

的颜色即可：

.svg图标{
颜色：#2759AE；
}

洛勒姆
前庭ac直径位于车辆部件的两侧。
洛勒姆
前庭ac直径位于车辆部件的两侧。

如果您将svg与js版本的Font Aowesome 5一起使用，它会将

中的所有内容预处理为

。它指定路径具有

fill=“currentColor”

因此，您必须以某种方式将

currentColor

设置为所需的颜色。一种选择是：

svg {color: blue;}

推荐的内联样式：

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

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

div .bggray2 {
    color: blue;
}

---

如果您使用的是Bootstrap 4，则可以使用标签父项中文本-“颜色”设置的和

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

---

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

div .bggray2 {
    color: blue;
}

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