How to change the inner white color of Font Awesome's exclamation triangle icon?

Question

How to change the inner (white) color of the icon ?

P.S. Applying is not an answer, as the red color applies to the outer color, not to the inner exclamation white sign itself.

The Font Awesome version is: 4.7.0.

user_8620333 · Answer

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;
}

The same thing with the V4:

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

Also the SVG version:

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

UPDATE

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.

Here is some example of icons:

.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;
}

user_7379503 · Answer

The answer of Temani Afif is a good one! Here's another approach;

.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;
}

How to change the inner white color of Font Awesome's exclamation triangle icon?

2 Answers