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

Question

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

我已经知道这个问题以及之后附加特殊的不可见FE0E字符的策略，以告诉浏览器不要将前面的字符显示为表情符号。

当我使用开发人员工具在"iPhone"模式下检查我的Windows 10 Chrome浏览器时，这个技巧似乎有效。

但是当我在实际的iPhone上查看时，这些字符显示为表情符号。

我做错了什么？

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

这是我的主要小提琴(除了下面包含的类似代码(。

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: '2705FE0E';
}

<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

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