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

by

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>

The same thing with the 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>

Also the SVG version:

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

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

More Related Contents:

  1. Can I change the color of Font Awesome’s cog icon?
  2. Font Awesome 5 on pseudo elements shows square instead of icon
  3. Why does styling the background of the body element affect the entire screen?
  4. Is it possible to have two background colors for a single html element? [duplicate]
  5. Li item on two lines. Second line has no margin
  6. How to center text vertically with a large font-awesome icon?
  7. Why the content is not covered by the background of an overlapping element?
  8. Color of stacked semi-transparent boxes depends on order?
  9. Use Font Awesome icon as CSS content
  10. Font Awesome icon inside text input element
  11. Stretch background image css?
  12. HTML: Changing colors of specific words in a string of text
  13. Changing highlight color
  14. Why cannot change checkbox color whatever I do? [duplicate]
  15. I can’t get my font-awesome icons to show up. Tried importing css with multiple methods
  16. How do I add a Font Awesome icon to input field?
  17. Is there a way to use use text as the background with CSS?
  18. CSS Background image not loading
  19. CSS for changing color of last word in h1
  20. Font awesome is not showing icon
  21. Fit website background image to screen size
  22. How to create a Slanted Background with CSS? [duplicate]
  23. How to center a (background) image within a div?
  24. Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3
  25. How to vertically align text with icon font?
  26. Fallback background-image if default doesn’t exist
  27. How to add a background image on top of a previous background image?
  28. Change color of bootstrap navbar on hover link?
  29. Font Awesome & Unicode
  30. Convert RGBA to HEX

Leave a Comment