更改字体真棒感叹号三角形图标的颜色答案

【问题标题】：change the color of font awesome's exclamation triangle icon更改字体真棒感叹号三角形图标的颜色
【发布时间】：2015-09-09 08:45:31
【问题描述】：

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

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

【问题讨论】：

你能给我们看一些代码吗？
把代码贴到jsfiddle或者粘贴到这里以便我们帮忙
不，你不能。您需要创建自己的矢量图标。
用真正的警告标志 ⚠ 代替 FontAwesome 怎么样。
@TusharKhatiwada 如何创建我自己的矢量图标..任何链接。

标签： css font-awesome

【解决方案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/

【讨论】：

感谢马科斯的例子。但我真的需要这个三角形，它在 FontAwesome 收藏中没有。好吧，我使用“fa-inverse”来反转颜色并且效果很好。
好的，对不起，我不能更好地帮助你。 FontAwesome 很棒，但我认为三角形是该系列中必不可少的图标。也许我们可以提出建议。
黄色三角形，黑色感叹号...使用三角形图标作为“背景”：jsfiddle.net/xojtv3Ld

【解决方案2】：

您可以在 illustrator 或 corel draw 中创建您的矢量图标。或者在 Photoshop 中打开你的图标 png 并在三角形区域添加红色与 buket .. 希望这个 hack 有所帮助

【讨论】：

【解决方案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>

【讨论】：