How to Change the Inner White Color of Font Awesome's Exclamation Triangle Icon

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

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>

change the color of font awesome's exclamation triangle icon

Unfortunatelly, the triangle is not in the FontAwesome collection, but if you doesn't matter if will be an square instead of a triangle, you can stack icons:

<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x" style="color: white;"></i>
  <i class="fa fa-exclamation fa-stack-1x fa-inverse" style="color:red;"></i>
</span>

See it working: http://jsfiddle.net/ao486t04/

How to style icon color, size, and shadow of FontAwesome Icons

Given that they're simply fonts, then you should be able to style them as fonts:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}

Font awesome - change the inner i color in class= fa-info-circle

you should implement this like this:

html

<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x icon-background2"></i>
  <i class="fa fa-info fa-stack-1x"></i> 
 </span>

css

.icon-background2 {
    color: #564363;
}

.fa-info {
  color:pink;
}

JSFiddle Example:
https://jsfiddle.net/codejhonny/8feo4k4x/

Font awesome background color is overflown

You can use stacked icons.

.vert {

  color: springgreen;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.css">

<span class="fa-stack">

  <i class="fas fa-circle vert fa-stack-2x"></i>

  <i class="far fa-circle  fa-stack-2x"></i>

</span>

Font Awesome: How to make the background-color out of the shape delimitation transparent?

I ended up using several fa-stack with the inner shape I wanted to use.

<span class="fa-stack fa-lg success">
 <i class="fa fa-circle fa-stack-2x"></i>
 <i class="fa fa-check fa-stack-1x"></i>
</span>

<span class="fa-stack fa-lg error">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-times fa-stack-1x"></i>
</span>

Although it defeats the purpose of delimiting the background: http://jsfiddle.net/cLpybq20/

Not exactly the same as the glyphs I was using but it fits my needs and appear less tweak-ish.

Add a white background to a fontawesome icon

You can play with background-image and a linear gradient like below

body {

  background: lightgreen;

  font-size: 126px;

}

.fa-question-circle:before {

  background-image: linear-gradient(#fff,#fff);

  background-repeat: no-repeat;

  background-size: 50% 75%;

  background-position: center;

}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<i class="fas fa-question-circle"></i>

---

Related Topics