图标颜色在移动浏览器中不会更改

Question

对于我的应用程序，我需要右箭头和向下箭头，我正在使用CSS Unicode，它应该是黄色的，使用下面的示例代码。不幸的是，它在桌面Web浏览器上工作正常，而不是在移动浏览器上显示灰色的右箭头颜色。仅在移动Chrome浏览器中会出现此问题。

.closed::before {
  content: "\25b6";
  color: #fe00f2;
}
.open::before {
  content: "\25bc";
  color: #fe00f2;
}

<p class="closed">My name is Donald</p>
<p class="open">My name is Donald</p>

请帮我整理这个问题。

Answer 1

尝试' / 25BA '而不是' / 25B6 '。我认为那是你正在寻找的标志。

<强> HTML：

<p class="closed">My name is Donald</p>
<p class="open">My name is Donald</p>

<强> CSS：

.closed::before {
  content: "\25ba";
  color: #fe00f2;
}
.open::before {
  content: "\25bc";
  color: #fe00f2;
}

<强> Working Code Pen

注意：我不知道为什么可以在另一个上工作，但Chrome和Safari似乎正确地设计了那个。此外，您在示例中使用的颜色更多是粉红色/紫色而不是黄色（如您的问题中所述），所以我继续使用相同的颜色如你的例子。

我建议您使用第三方图标库，例如Font Awesome，就像之前的评论者所述，但这超出了原始问题的范围。