fa-star () 总是黄色的，如何让它变白？
fa-star () is always yellow, how to make it white?
设置 color:white; 或什至使用 class icon-light 或 icon-white 使所有 font-awesome-icons 变白，除了 fa-star 仍然是黄色不管我做什么！
我试过用与在元素的内联样式中使用 !important 一样绝望的方法覆盖 css。星星仍然是黄色的！ （见下图）
为什么会这样，如何让它变白？
(使用font-awesome 3.2.1是为了支持IE7，别问我为什么)
基本上这是我的标记：
<i class="icon-white icon-star" style="color:white;"></i>
或者当我截取下面的屏幕截图时：
<i class="icon-light icon-star" style="color:white !important;"></i>
从图中可以看出，这个内联样式规则基本上覆盖了一堆其他 css-规则说同样的事情； color 应该是 white.
这种行为特别有趣的是 "Computed Styles" 下的 chrome 调试器实际上声称星星是白色的。如您所见，情况并非如此。
编辑：我实际上设法解决了这个问题，但我不知道为什么我的解决方案有效，所以我会留下这个问题，希望有人可以提供对这里实际发生的事情的洞察力。这是我所做的：
如果您查看 font-awesome.css，您会发现以下块：
.icon-star:before{
content:"\f005";
}
作为我继续研究这个神秘错误的第一步，我将 <i> 上的 class 更改为 white-star 并将以下内容添加到我的样式表中：
.white-star:before{
content:"\f005";
}
当我惊讶地发现那颗星星是白色的时，我正打算从那里尝试一些其他的东西！
这不再是需要解决的问题，但我真的很想知道这里发生了什么，所以我就把这个问题悬而未决，希望有人能提供一些见解（对我和社区）。
黄色是因为它是位图表情符号。要获得矢量（无色）符号，您需要在字符后缀 UNICODE VARIATION SELECTOR-15 强制渲染为矢量。这记录在这里：http://mts.io/2015/04/21/unicode-symbol-render-text-emoji/
VARIATION SELECTOR-15 是 U+FE0E.
所以我终于想通了。当然，解决方案很明显！
icon-star 的颜色在 .icon-star:before 元素上设置。我在这里做错的是将颜色规则设置为 .icon-star 元素。颜色当然是继承的，但继承不会覆盖直接设置给子元素的规则（doh！）。这就是为什么添加 !important 没有效果。
原则是：在设置 FA 图标的样式时，将样式设置为伪元素，而不是父元素！
设置 color:white; 或什至使用 class icon-light 或 icon-white 使所有 font-awesome-icons 变白，除了 fa-star 仍然是黄色不管我做什么！
我试过用与在元素的内联样式中使用 !important 一样绝望的方法覆盖 css。星星仍然是黄色的！ （见下图）
为什么会这样，如何让它变白？
(使用font-awesome 3.2.1是为了支持IE7，别问我为什么)
基本上这是我的标记：
<i class="icon-white icon-star" style="color:white;"></i>
或者当我截取下面的屏幕截图时：
<i class="icon-light icon-star" style="color:white !important;"></i>
从图中可以看出，这个内联样式规则基本上覆盖了一堆其他 css-规则说同样的事情； color 应该是 white.
这种行为特别有趣的是 "Computed Styles" 下的 chrome 调试器实际上声称星星是白色的。如您所见，情况并非如此。
编辑：我实际上设法解决了这个问题，但我不知道为什么我的解决方案有效，所以我会留下这个问题，希望有人可以提供对这里实际发生的事情的洞察力。这是我所做的：
如果您查看 font-awesome.css，您会发现以下块：
.icon-star:before{
content:"\f005";
}
作为我继续研究这个神秘错误的第一步，我将 <i> 上的 class 更改为 white-star 并将以下内容添加到我的样式表中：
.white-star:before{
content:"\f005";
}
当我惊讶地发现那颗星星是白色的时，我正打算从那里尝试一些其他的东西！
这不再是需要解决的问题，但我真的很想知道这里发生了什么，所以我就把这个问题悬而未决，希望有人能提供一些见解（对我和社区）。
黄色是因为它是位图表情符号。要获得矢量（无色）符号，您需要在字符后缀 UNICODE VARIATION SELECTOR-15 强制渲染为矢量。这记录在这里：http://mts.io/2015/04/21/unicode-symbol-render-text-emoji/
VARIATION SELECTOR-15 是 U+FE0E.
所以我终于想通了。当然，解决方案很明显！
icon-star 的颜色在 .icon-star:before 元素上设置。我在这里做错的是将颜色规则设置为 .icon-star 元素。颜色当然是继承的，但继承不会覆盖直接设置给子元素的规则（doh！）。这就是为什么添加 !important 没有效果。
原则是：在设置 FA 图标的样式时，将样式设置为伪元素，而不是父元素！