更改 font awesome 感叹号三角形图标的颜色
change the color of font awesome's exclamation triangle icon
我必须使用 font awesome 的感叹号三角形图标,但我需要红色感叹号和白色三角形背景。
当我将图标的颜色更改为红色时,它的作用正好相反。有人可以帮我解决这个问题吗?
<i class="fa fa-exclamation-triangle fa-3x" style = "color:#C00000"></i>
不幸的是,三角形不在 FontAwesome 集合中,但如果您不介意是正方形而不是三角形,您可以堆叠图标:
<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>
您可以在 Illustrator 或 Corel Draw 中创建矢量图标。或者在 photoshop 中打开你的 png 图标并在三角形区域添加红色和 buket ..希望这个 hack 有帮助
一个解决方案是使用原来的惊叹号三角形并堆叠它。
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>
我必须使用 font awesome 的感叹号三角形图标,但我需要红色感叹号和白色三角形背景。 当我将图标的颜色更改为红色时,它的作用正好相反。有人可以帮我解决这个问题吗?
<i class="fa fa-exclamation-triangle fa-3x" style = "color:#C00000"></i>
不幸的是,三角形不在 FontAwesome 集合中,但如果您不介意是正方形而不是三角形,您可以堆叠图标:
<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>
您可以在 Illustrator 或 Corel Draw 中创建矢量图标。或者在 photoshop 中打开你的 png 图标并在三角形区域添加红色和 buket ..希望这个 hack 有帮助
一个解决方案是使用原来的惊叹号三角形并堆叠它。
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>