javascript - 图标颜色在移动浏览器中没有改变

Question

对于我的应用程序，我需要使用 CSS Unicode 的向右和向下箭头，它应该是黄色的，因为我正在使用下面的示例代码。不幸的是，它在桌面网络浏览器上运行良好，而不是在移动浏览器上运行良好，在移动浏览器上它以灰色显示右箭头颜色。此问题仅出现在移动版 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 似乎正确设置了那个样式。此外，您在示例中使用的颜色更多的是 pink/purple 而不是 yellow (如您的问题中所述)，因此我继续使用相同的颜色就像你的例子一样。

我建议使用第三方图标库，例如 Font Awesome ，正如您之前的评论者所说，但这超出了您最初问题的范围。