My iPhone is displaying the character ✅︎ as a green checkbox instead of a standard grayscale thick check mark.
I have already come across this question and I am familiar with the technique of adding the invisible special character \FE0E afterwards to instruct the browser not to interpret the preceding character as an emoji.
This method appears to be effective when I test in "iPhone" mode on Chrome for Windows 10 using developer tools.
However, when I view it on my actual iPhone, the characters still render as emojis.
What could I be doing incorrectly?
Is there a way to ensure that all browsers on all devices do not show a character as an emoji?
You can find the main fiddle here (along with similar code provided 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 heavy check mark item</li>
</ul>
<ul class="emojiCheck">
<li>Green checkbox item</li>
</ul>