此图标的感叹号是透明的部分，因此一个技巧是在其后面添加背景以具有所需的颜色。当然，背景不应该覆盖整个区域，因此我们需要使用渐变来覆盖其中的一部分。
.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 ></i><i ></i><i ></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 ></i><i ></i><i ></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 ></i><i ></i><i ></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 ></i><i ></i><i ></i><i ></i>
