When Text Characters Decide to Become Emoji
Some Unicode characters are rendered as emoji by certain browsers, regardless of how you intended them to display. For example, characters like ▶, ↩, and ❤ appear as regular text in Chrome, but iOS Safari will automatically convert them to emoji. The difference matters: when rendered as text, you can control their color via CSS; once the browser decides to render them as emoji, that styling is ignored.
This becomes a practical problem when those characters appear across many pages. In one case, a site owner was seeing "red diamonds" they didn't want, but the issue was invisible on desktop — it only appeared on mobile devices.
Requesting Text Rendering with Variation Selectors
Unicode provides a mechanism to explicitly request text presentation: the variation selector ︎. According to the spec, appending this sequence to a character should force it to render as text rather than emoji. Note the placement is critical — it goes after the character, not before. So the correct form is ❤︎︎, which does work on iOS.
Some sources suggest that setting font-family: monospace can also prevent the emoji conversion. Testing shows this doesn't reliably work; any success appears limited to specific platforms like iPadOS.
Styling Emoji That Can't Be Changed
When you do have a CSS selector for the element, there are workarounds even if the character gets converted to emoji. One approach is to apply a color directly to the element. Another is to use a text-shadow trick to create the appearance of a colored character, as demonstrated by Preethi Sam.
However, these solutions require that you can select the offending elements. If the problematic characters are scattered across hundreds of database entries without a reliable selector, neither approach helps.
Dealing with Stubborn Characters
In cases where the characters can't be controlled through CSS and appear in unpredictable locations, the practical solution is to remove or replace them at the data level. Running a MySQL search-and-replace across the entire database — using a tool like Better Search Replace — eliminates the characters entirely and solves the problem at the source.
For further reading on the mechanics of Unicode text-versus-emoji rendering, Matias Singers has written a useful overview in "Unicode symbol as text or emoji."
