更改 font awesome 感叹号三角形图标的颜色

Question

我必须使用 font awesome 的感叹号三角形图标，但我需要红色感叹号和白色三角形背景。当我将图标的颜色更改为红色时，它的作用正好相反。有人可以帮我解决这个问题吗？

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

Answer 1

不幸的是，三角形不在 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>

看到它有效：http://jsfiddle.net/ao486t04/

Answer 2

您可以在 Illustrator 或 Corel Draw 中创建矢量图标。或者在 photoshop 中打开你的 png 图标并在三角形区域添加红色和 buket ..希望这个 hack 有帮助

Answer 3

一个解决方案是使用原来的惊叹号三角形并堆叠它。

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 感叹号三角形图标的颜色

change the color of font awesome's exclamation triangle icon

css

font-awesome