如何更改Font Awesome感叹号三角图标的内部白色？

Question

如何更改图标内部（白色）颜色？

P.S. 应用 <i class="fa fa-exclamation-triangle" style="color:red"></i> 不是一种解决方案，因为红色适用于外部颜色，而不适用于内部感叹号的白色标志本身。

Font Awesome 版本为：4.7.0。

- Haradzieniec

---

也许你可以尝试在浏览器中使用F12，看看是否有一些关于 ::before 和 ::after 的技巧... - The Fool

Answer 1

这个图标的感叹号是透明的，因此一个技巧是在它后面添加一个背景来获得所需的颜色。当然，背景不能覆盖整个区域，因此我们需要使用渐变来仅覆盖其部分。

.fa-exclamation-triangle {
  background:linear-gradient(red,red) center bottom/20% 84% no-repeat;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<i class="fas fa-exclamation-triangle fa-7x"></i>
<i class="fas fa-exclamation-triangle fa-4x"></i>
<i class="fas fa-exclamation-triangle fa-2x"></i>

与V4一样：

.fa-exclamation-triangle {
  background:linear-gradient(red,red) center /20% 70% no-repeat;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-exclamation-triangle fa-5x"></i>
<i class="fa fa-exclamation-triangle fa-4x"></i>
<i class="fa fa-exclamation-triangle fa-2x"></i>

同时提供SVG版本：

---

.fa-exclamation-triangle {
  background:linear-gradient(red,red) center bottom/20% 84% no-repeat;
}

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" ></script>
<i class="fas fa-exclamation-triangle fa-7x"></i>
<i class="fas fa-exclamation-triangle fa-4x"></i>
<i class="fas fa-exclamation-triangle fa-2x"></i>

更新

为了让答案更加通用，我们还可以考虑使用多个背景和径向渐变来给任何形状上色。诀窍在于覆盖透明部分而不溢出背景。

以下是一些图标示例：

.fa-exclamation-triangle {
  background:linear-gradient(red,red) center bottom/20% 84% no-repeat;
}
.fa-ambulance {
 background:
  linear-gradient(blue,blue) 25% 30%/32% 45% no-repeat, 
  radial-gradient(green 60%,transparent 60%) 15% 100%/30% 30% no-repeat,
  radial-gradient(green 60%,transparent 60%) 85% 100%/30% 30% no-repeat;
}
.fa-check-circle {
  background:radial-gradient(yellow 60%,transparent 60%);
}
.fa-angry {
 background: 
  radial-gradient(red 60%,transparent 60%) 25% 40%/30% 30% no-repeat,
  radial-gradient(red 60%,transparent 60%) 75% 40%/30% 30% no-repeat;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<i class="fas fa-exclamation-triangle fa-7x"></i>
<i class="fas fa-ambulance fa-7x"></i>
<i class="fas fa-check-circle fa-7x"></i>
<i class="fas fa-angry fa-7x"></i>

- Temani Afif

---

OP用的是4.7.0版本，顺便提一下。 - לבני מלכה

Answer 2

Temani Afif的回答很好！这里有另一种方法：

.fa-exclamation-triangle{
  position: relative;
  z-index:0;
}
.fa-exclamation-triangle:after{
  content: ' ';
  width: 20%;
  height: 70%;
  position: absolute;
  top: 15%;
  left: 40%;
  background: red;
  z-index: -1;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-exclamation-triangle fa-5x"></i>
<i class="fa fa-exclamation-triangle fa-4x"></i>
<i class="fa fa-exclamation-triangle fa-2x"></i>

- ssten