Check mark as emoji

by rwhal06

HTML

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

Why does iOS ignore the `\FE0E` modifier here? My iPhone displays green checkboxes even when I add the invisible character instructing the styles NOT to convert it to emoji.

SCSS

li {
  margin-bottom: 15px;
}

ul.thickCheck {
  list-style: none;
  > li {
    position: relative;
    &:before {
      content: '\2705\FE0E';
      position: absolute;
      left: -26px;
      top: -3px;
    }
  }
}

ul.emojiCheck {
  list-style: none;
  > li {
    position: relative;
    &:before {
      content: '\2705';
      position: absolute;
      left: -26px;
      top: -3px;
    }
  }
}