5

My iPhone is showing this character ✅︎ as a green checkbox instead of a simple grayscale thick check mark.

I'm already aware of this question and the strategy of appending the special invisible \FE0E character afterwards to tell the browser not to display the preceding character as an emoji.

That trick seems to work when I check my Windows 10 Chrome browser in "iPhone" mode using the developer tools.

But when I look on my actual iPhone, the characters appear as emojis.

What am I doing wrong?

How can I force all browsers on all devices to NOT display a character as an emoji?

Here is my main fiddle (in addition to similar code included below).

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>
Community
  • 1
  • 1
Ryan
  • 22,332
  • 31
  • 176
  • 357

1 Answers1

0

I'd try copying and pasting the check mark, here's one you can use: ✔️

If that doesn't work I'd either use a different Coding Editor, or try coding on a different device.

You could also run you're code through these validators to check for any other occurring errors:

HTML Validator CSS Validator

Hope one of these solutions work!

LJ-dev
  • 64
  • 1
  • 2
  • 10
  • Thanks, but my question isn’t specifically about a check mark; I’m trying to handle any given emoji. – Ryan May 17 '20 at 11:24
  • Ok, here's an article that can help you disable the emoji keyboard. [Turn off Emoji Keyboard](https://www.macworld.co.uk/how-to/iosapps/how-turn-off-emoji-on-iphone-ipad-how-disable-emoji-keyboard-in-ios-3647389/) You can re-enable the keyboard again once you need it. Hope this Helps! – LJ-dev May 17 '20 at 17:28