html - Change the color of Font Awesome's icon

Question

How to change the inner (white) color of the icon <i class="fa fa-exclamation-triangle"></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.

The Font Awesome version is: 4.7.0.

Answer 1

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>