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.
xxxxxxxxxx1
<p>🚀︎</p>Output:
xxxxxxxxxx1
🚀︎Hint: if you do not see the result in the above output, it means your browser doesn't support the feature.
Practical example
xxxxxxxxxx1
2
<html>3
<body>4
<div>5
<span>🚀</span>6
<span>🚀︎</span>7
</div>8
<div>9
<span>🍏</span>10
<span>🍏︎</span>11
</div>12
<div>13
<span>🍌</span>14
<span>🍌︎</span>15
</div>16
<div>17
<span>🍊</span>18
<span>🍊︎</span>19
</div>20
<div>21
<span>👌</span>22
<span>👌︎</span>23
</div>24
<div>25
<span>✋</span>26
<span>✋︎</span>27
</div>28
<div>29
<span>👋</span>30
<span>👋︎</span>31
</div>32
<div>33
<span>👍</span>34
<span>👍︎</span>35
</div>36
</body>37
</html>