Languages
[Edit]
EN

HTML - prevent rendering unicode characters as emoji

9 points
Created by:
Eshaal-Wilkinson
354

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+FE0E code that is called VARIATION SELECTOR-15, can be found here.

<p>🚀&#xFE0E;</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>🚀&#xFE0E;</span>
  </div>
  <div>
    <span>🍏</span>
    <span>🍏&#xFE0E;</span>
  </div>
  <div>
    <span>🍌</span>
    <span>🍌&#xFE0E;</span>
  </div>
  <div>
    <span>🍊</span>
    <span>🍊&#xFE0E;</span>
  </div>
  <div>
    <span>👌</span>
    <span>👌&#xFE0E;</span>
  </div>
  <div>
    <span>✋</span>
    <span>✋&#xFE0E;</span>
  </div>
  <div>
    <span>👋</span>
    <span>👋&#xFE0E;</span>
  </div>
  <div>
    <span>👍</span>
    <span>👍&#xFE0E;</span>
  </div>
</body>
</html>
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join