fa-star (&#xf005) 一直是黄色的，怎么变白？答案

【问题标题】：fa-star (&#xf005) is always yellow, how to make it white?fa-star (&#xf005) 一直是黄色的，怎么变白？
【发布时间】：2015-04-24 20:56:01
【问题描述】：

设置color:white; 甚至使用icon-light 或icon-white 类会使所有字体真棒图标变为白色，除了fa-star 无论我做什么都会保持黄色！

我尝试过使用像在元素的内联样式中使用 !important 一样绝望的方法来覆盖 css。星星仍然是黄色的！（见下图）

为什么会这样，如何让它变白？

(为了支持IE7，使用font-awesome 3.2.1，别问我为什么)

基本上这是我的标记：

<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”下的 chromes 调试器实际上声称星星是白色的。如您所见，情况并非如此。

编辑：我实际上设法解决了这个问题，但我不知道为什么我的解决方案有效，所以我会留下这个问题，希望有人可以深入了解这里实际发生的情况。这是我所做的：

如果您查看 font-awesome.css，您会发现以下代码块：

.icon-star:before{
content:"\f005";
}

作为继续研究这个神秘错误的第一步，我将<i> 上的类更改为white-star，并将以下内容添加到我的样式表中：

 .white-star:before{
 content:"\f005";
}

从那里我打算尝试其他一些东西时，我惊讶地发现星星是白色的！

这不再是一个需要解决的问题，但我真的很想知道这里发生了什么，所以我将把这个问题留着，希望有人可以提供一些见解（对于我和社区） .

【问题讨论】：

【解决方案1】：

黄色是因为它是位图表情符号。要获得矢量（无色）符号，您需要在字符后缀UNICODE VARIATION SELECTOR-15，这会强制渲染为矢量。这记录在这里：http://mts.io/2015/04/21/unicode-symbol-render-text-emoji/

VARIATION SELECTOR-15 是U+FE0E。

【讨论】：

虽然这并没有真正解决我的问题，但读起来很有趣，我确实觉得它应该解决了我的问题。点赞获得。 =)
实际上我添加了一个新类，并给了它与 font-awesome 完全相同的规则，即 content:"\f005";它突然变白了！我不知道为什么，我最好的猜测是 F-A 3.2.1 中某处有一些内部规则使它变黄，并且不知何故无法覆盖，这是一个荒谬的想法。我很困惑。
@AndersMartini 是的，看来我错了。我在本地尝试过，Windows 10 Technical Preview 上的 Chrome 42 总是给我矢量渲染。很奇怪。

【解决方案2】：

所以我终于想通了。当然，解决方案是显而易见的！

icon-star 的颜色在.icon-star:before 元素上设置。我在这里做错的是为.icon-star 元素设置颜色规则。颜色当然是继承的，但继承不会覆盖直接设置为子元素的规则（doh！）。这就是添加!important 无效的原因。

道德是：在为 FA 图标设置样式时，将样式设置为伪元素，而不是父元素！

【讨论】：