如何防止字符在''内容'之前的CSS中显示为表情符号？

Question

我的iPhone将此字符✅︎显示为绿色复选框，而不是简单的灰度粗选复选标记。

我已经知道this question以及之后附加特殊隐形\FE0E字符的策略，告诉浏览器不将前一个字符显示为表情符号。

当我使用开发者工具以“iPhone”模式检查我的Windows 10 Chrome浏览器时，这个技巧似乎有效。

但是当我查看我的实际iPhone时，这些角色会显示为表情符号。

我做错了什么？

如何强制所有设备上的所有浏览器都不会将字符显示为表情符号？

这是我的主要fiddle（除了下面包含的类似代码）。

li {
  margin-bottom: 15px;
  position: relative;
}

ul {
  list-style: none;
}

li:before {
  content: '\2705';
  position: absolute;
  left: -26px;
  top: -3px;
}

ul.thickCheck li:before {
  content: '\2705\FE0E';
}

<ul class="thickCheck">
  <li>Simple grayscale thick check mark item</li>
</ul>
<ul class="emojiCheck">
  <li>Green checkbox item</li>
</ul>

Answer 1

我会尝试复制并粘贴选中标记， 这是您可以使用的一个：✔️

如果这不起作用，我要么使用其他的编码编辑器，要么尝试在其他设备上进行编码。

您还可以通过以下验证器运行您的代码，以检查是否发生其他任何错误：

HTML Validator CSS Validator

希望其中一种解决方案有效！