fontawesome 5.x将颜色设置为图标

Question

我无法使用这些代码着色font-awesome5图标.我尝试了"填充"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;
}

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:

您可以i在使用CSS版本时应用颜色.

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

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