更改 Font Awesome 图标的颜色 [重复]

Question

这个问题在这里已经有了答案：

如何设置 Font Awesome Icons 的图标颜色、大小和阴影24 答案

如何更改字体真棒图标的颜色2 个答案

我可以更改 Font Awesome 图标颜色的颜色吗？ (22 个回答)

8 天前关闭。

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

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

Font Awesome 版本是：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>