EN
HTML - prevent rendering unicode characters as emoji
9
points
In this article, we would like to show how to prevent emoji rendering when we use Unicode characters in HTML.
Quick solution:
Wrap Unicode character with element adding
︎code after the character.Warning: In may not working on some web browsers (e.g. Google Chrome on mobile).
Note: to know more about
U+FE0Ecode that is called VARIATION SELECTOR-15, can be found here.
<p>🚀︎</p>
Output:
🚀︎
Hint: if you do not see the result in the above output, it means your browser doesn't support the feature.
Practical example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div>
<span>🚀</span>
<span>🚀︎</span>
</div>
<div>
<span>🍏</span>
<span>🍏︎</span>
</div>
<div>
<span>🍌</span>
<span>🍌︎</span>
</div>
<div>
<span>🍊</span>
<span>🍊︎</span>
</div>
<div>
<span>👌</span>
<span>👌︎</span>
</div>
<div>
<span>✋</span>
<span>✋︎</span>
</div>
<div>
<span>👋</span>
<span>👋︎</span>
</div>
<div>
<span>👍</span>
<span>👍︎</span>
</div>
</body>
</html>