Question

我必须使用字体真棒的感叹号三角形图标，但我需要将红色的感叹号标记和白色的三角形背景。当我将图标的颜色更改为红色时，它会反过来。有人可以帮我这个吗？

<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图标，并在三角区域添加红色的颜色..希望这个黑客帮助

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>

改变字体真棒的惊叹号三角形图标的颜色

3 个答案: