css - 如何防止字符在 CSS 'before' 'content' 中显示为表情符号？

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

希望这些解决方案之一有效!