css - fa-star () 总是黄色的，如何让它变白？

Question

设置color:white;甚至使用类 icon-light或 icon-white使所有字体图标变为白色，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 .

这种行为特别有趣的是“计算样式”下的 chrome 调试器实际上声称星星是白色的。如您所见，情况并非如此。

编辑:我实际上设法解决了这个问题，但我不知道为什么我的解决方案有效，所以我会留下这个问题，希望有人能提供对这里实际发生的事情的洞察力。这是我所做的:

如果您查看 font-awesome.css，您会发现以下 block :

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

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

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

当我惊讶地发现那颗星星是白色的时，我正准备尝试其他一些东西!

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

Answer 1

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

VARIATION SELECTOR-15 是 U+FE0E。