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

Answer 1

Font Awesome 5使用svg作为图标，path内部设置为fill:currentColor，因此只需更改svg的颜色：

＆＃13;

.icons svg {
 color:#2759AE;
}

＆＃13;

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

＆＃13;

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

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

＆＃13;

.icons i {
 color:#2759AE;
}

＆＃13;

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

＆＃13;

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

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

Answer 2

如果您正在使用svg-with-js版本的Font Awesome 5，它会将<i></i>中的所有内容都加入<svg>并将其预处理为fill="currentColor"。它指定路径为currentColor因此，您必须将svg {color: blue;}设置为您想要的颜色。一种选择是：

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

official docs推荐内联样式：

currentColor

或者，在其中一个外部元素中设置<div class="bggray2 text-center" style="color: blue;"> <i class="far fa-edit fa-5x"></i> </div>。例如：

div .bggray2 {
    color: blue;
}

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

border-radius: 100%

Answer 3

如果您使用的是Bootstrap 4，则可以在标签的父级中使用和的“颜色”设置。

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

Answer 4

常规方式：在documentation上建议：

<span style="font-size: 3em; color: #ccc;">
  <i class="fas fa-igloo"></i>
</span>

类似地，您可以在i标签内使用样式标签：

<i class="fas fa-igloo" style="color: #ccc;"></i>

其他方式：：如果您想使用普通的CSS字体而不是SVG一次定位所有图标，则也可以使用此选项：

我们可以使用以下类为颜色添加css。

i.fas, i.fab, i.far, i.fal {
   color: #ccc;
}

5.x的变化：

<5.x版本使用基本的fa fa-icon-name类在i标签上应用图标。使用5.x，FontAwesome对类进行了一些模块化，因此我们现在没有fa了，而是为固体，常规和品牌图标提供了单独的类。例如：

实体样式（fas）-<i class="fas fa-clock"></i>

常规样式（远）-<i class="far fa-clock"></i>

浅色样式（fal）-<i class="fal fa-clock"></i>

品牌样式（fab）-<i class="fab fa-clock"></i>

以

时钟为例，使用图标名称代替。

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

4 个答案: