CODEWITHSUNDEEP
cssfont-awesome
Chanki Ahuja
Chanki Ahuja

Reputation: 23

change the color of font awesome's exclamation triangle icon

I have to use font awesome's exclamation triangle icon but I need to have the exclamation's mark in Red color and triangle's background in white. When I change the color of the icon to Red, it does the opposite. Can someone help me with this?

<i class="fa fa-exclamation-triangle fa-3x" style = "color:#C00000"></i>

Upvotes: 1

Views: 14754

Answers (3)

nullable
nullable

Reputation: 2581

A solution is to use the original exclamation triangle and stack it.

body {
  background:red;
  font-size:30px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-sm">
  <i class="fa fa-exclamation fa-stack-2x fa-inverse" style="font-size:1.5em; padding-top:.2em"></i>
  <i class="fa fa-exclamation-triangle fa-stack-2x" style="color:blue;"></i>
</span>

<span class="fa-stack fa-lg">
  <i class="fa fa-exclamation fa-stack-2x fa-inverse" style="font-size:1.5em; padding-top:.2em"></i>
  <i class="fa fa-exclamation-triangle fa-stack-2x" style="color:blue;"></i>
</span>

Upvotes: 1

Shazia K
Shazia K

Reputation: 1

You can create your vector icon in illustrator or corel draw. Or open your png of icon in photoshop and add red color with buket on the triangle area.. hope this hack helps

Upvotes: 0

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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/

Upvotes: 6

Related Questions