MEDIUM BLACK CIRCLE 在某些设备上始终为黑色答案

【问题标题】：MEDIUM BLACK CIRCLE always black on some devicesMEDIUM BLACK CIRCLE 在某些设备上始终为黑色
【发布时间】：2016-12-07 18:03:59
【问题描述】：

我正在使用 Unicode 字符“中黑色圆圈”，又名： ⚫

然后改变它的颜色。它在我的大多数设备上都可以正常工作，但在我的安卓手机和一些同事的电脑（相同的电脑品牌和浏览器）上它总是黑色而不是 #009FDA。

<span style="color:#009FDA;">&#9899 </span>

如何解决这个问题？

解决了！

解决方案（字体真棒）： <i class="fa fa-circle" style="color:#009FDA;" aria-hidden="true"></i>

如果有人知道的话，我仍然对为什么会发生这种情况非常感兴趣..

【问题讨论】：

发生这种情况有一个非常有趣的原因：一些浏览器和移动操作系统将这个符号替换为表情符号（不能着色）：emojipedia.org/medium-black-circle
您最好使用项目符号并放大其大小，或者在 HTML/CSS 中创建一个小圆圈（背景颜色和边框半径：50%）。
嗯，就叫黑色圆……

【解决方案1】：

你有两个选择

选项 1：Unicode 字符

使用 Unicode 字符。它有效

body{
  font-size:15px;
  line-height:15px;
}

<span style="color:#009FDA; ">&#9899 </span> 
<br/>
<span style="color:#009FDA; font-size:250%; height:15px; ">•</span>

选项 2：使用边框半径进行圆形形状（适用于所有浏览器）

具有border-radius:50%; 且宽度和高度相同的圆圈的类

span.circle{
  height:10px;
  width:10px;
  border-radius:50%;
  background-color:#009FDA;
  display:inline-block;
}

&lt;span class='circle'&gt;&lt;/span&gt;

其他选项：您可以使用Font-awesome、svg 或图片

【讨论】：

另外，这不是因为您使用未转义形式的 unicode 字符，而是因为您使用了 不同的 unicode 字符（确切地说是&#x2022;），而这恰好不是有这个问题。
其他选项包括图像或 SVG。
是的，但两者都是相同的形状...这就是我使用它们的原因。
@GolezTrol 是的，你说得对。谢谢，值得一提的是其他选项
为什么我没有想到 font-awesome.. 我的系统中已经有了它。解决方案：<i class="fa fa-circle" style="color:#009FDA;" aria-hidden="true"> 如果有人知道，我仍然对为什么会发生这种情况非常感兴趣..