How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?
I'm finding Unicode for special characters from FileFormat.Info's search.
Some characters are rendering as the classic black-and-white glyphs, such as ⚠ (warning sign, \u26A0 or ⚠). These are preferable, since I can apply CSS styles (such as color) to them.
Others are rendering as newer cartoony emoji, such as ⌛ (hourglass, \u231B or ⌛). These are not preferable, since I cannot fully style them.
It appears that the browser is making this change, since I'm able to see the hourglass glyph on Mac Firefox, just not Mac Chrome nor Mac Safari.
Is there a way to force browsers to display the older (flat monotone) versions to display?
Update: It seems (from comments below) there is a text presentation selector, FE0E, available to enforce text-vs-emoji. The selector is concatenated as a suffix without space onto the character's code, such as ⌛︎ for HTML hex or \u231B\uFE0E for JS. However, it is simply not honored by all browsers (eg Chrome and Edge).
Answer
Append the Unicode variation selector character for forcing text, VS15, ︎.
This forces the previous character to be rendered as text rather than as an Emoji Symbol.
<p>🔒︎</p>
Result: 🔒︎
Learn more at: Unicode symbol as text or emoji