如何更改FontAwesome的感叹三角形图标的内部白色？

Question

如何更改图标的内部(白色(颜色<i class="fa fa-exclamation-triangle"></i>？

附言：应用<i class="fa fa-exclamation-triangle" style="color:red"></i>不是答案，因为红色适用于外部颜色，而不是内部感叹号白色符号本身。

字体真棒版本是：4.7.0。

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>

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>