更改Font Awesome图标的颜色 [英] Change the color of Font Awesome's icon
问题描述
如何更改图标的内部(白色)颜色
<i class="fa fa-exclamation-triangle"></i>
吗?
How to change the inner (white) color of the icon
<i class="fa fa-exclamation-triangle"></i>
?
P.S.应用<i class="fa fa-exclamation-triangle" style="color:red"></i>
并不是答案,因为红色适用于外部颜色,而不适用于内部感叹号白色符号本身.
P.S. Applying <i class="fa fa-exclamation-triangle" style="color:red"></i>
is not an answer, as the red color applies to the outer color, not to the inner exclamation white sign itself.
真棒"字体版本是:4.7.0.
The Font Awesome version is: 4.7.0.
推荐答案
此图标的感叹号是透明的,因此,可以在其后面添加背景以具有所需的颜色是一个技巧.当然,背景不应该覆盖整个区域,因此我们需要使用渐变来仅覆盖其中的一部分.
The exclamation mark of this icon is a transparent part, so a trick is to add a background behind it to have the needed coloration. Of couse, the background shouldn't cover the whole area so we need to use a gradient to cover only a part of it.
.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>
更新
为使答案更通用,我们还可以考虑多个背景和径向渐变,以便为任何形状着色.诀窍是在背景上覆盖透明部分而不会溢出.
To make the answer more generic we can also consider multiple background and radial-gradient in order to color any kind of shape. The trick is to cover with the background the transparent part without overflowing.
以下是一些图标示例:
.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>
这篇关于更改Font Awesome图标的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!