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

问题描述：

我无法使用这些代码为Font Awesome 5图标着色.我尝试使用fill css属性设置颜色，但这没用.

I can't colorize the Font Awesome 5 icons using these codes. I tried fill css property for setting color but it didn't work.

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

答

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

Font Awesome 5 uses svg for icons and path inside are set with fill:currentColor so simply change color of 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:

As you can see in the code, the i are replaced with svg when you load the JS version:

如果使用的是CSS版本，则可以为i应用颜色.

You can apply color to i in case you are using the CSS version.

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

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

So to make sure it will work in all the cases simply use both selector:

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

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

相关推荐