无法更改Unicode字符的字体颜色

Question

在Joomla前端编辑页面的发布按钮上有一个日历图标，我使用Unicode字符U+1F5D2来表示它，但是无法通过CSS更改其颜色。我试图将其变成白色，浏览器检查器显示它是白色的，但实际上不是。 请点击此处查看示例 我不知道Unicode是否应该这样做，在使用特定字符之前从未遇到过这个问题。

该字符由class="icon-calendar"的span元素上的:before调用。我尝试在元素的几个不同级别上更改颜色属性，包括:before和span本身，但都没有生效。

#adminForm a.btn,
#adminForm button.btn {
  background-color: #0e71b8;
  color: #ffffff;
}

#adminForm button.btn:before {
  color: #ffffff;
}

有人知道这是否应该发生以及如何避免它吗？

- Bart K

---

该字符通过在class="icon-calendar"的span元素上调用:before来实现。我尝试更改元素的多个级别（包括:before和span本身）上的颜色属性，但都没有生效。 - Bart K

在这个puush(http://puu.sh/mFaXe.png)中，您可以看到显示颜色设置的检查器摘录。 - Bart K

Answer 1

我有一个类似的问题。看起来一些Unicode字符已经包含了颜色和轮廓，无法通过CSS进行更改。

因此，可选方案为：

• 查找可以在CSS中更改的替代Unicode字符
• 使用字体图标
• 使用图像

- John

Answer 2

似乎使用HTML实体可以工作。

* {background: #000; font-size: 1.4em;}
.cal {color: #fff;}

<span class="cal">&#128197;</span>

更新于:pseudo

你的问题中应该提到了伪类。

查看你的CSS，你没有针对:before伪类进行定位。

#adminForm a.btn:before,
#adminForm button.btn:before {
  color: #fff;
}

- Aaron

---

我似乎无法在:before中使用html实体，这是不幸的必要条件。 - Bart K

忘了在原问题中提到，但我已经尝试过了 :/ 我也会更新原问题。 - Bart K

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Aaron

这似乎完全不起作用。日历图标仍然是灰色的，而不是白色的。 至少在Chrome和Firefox中是这样的。IEdge正在绘制一个白色的日历图标。 我不喜欢那些五颜六色的表情符号图标 - 它们颠覆了计算机排版的规则... - grilly

Answer 3

Bart，

问题可能是由于缺少字体或依赖于您的基础CSS Normalize引起的，但您可以尝试使用“Fonts Googleapis”代码来更改颜色。抱歉我的英语不好。

See: http://codepen.io/KingRider/pen/QGeMoQ

为什么不试试最好的“Font Awesome”插件呢？

http://fontawesome.io/examples/

- KingRider