Languages
[Edit]
EN

HTML - prevent rendering unicode characters as emoji

9 points
Created by:
Eshaal-Wilkinson
564

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>
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
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