Unicode characters such as ■ (black square U+25A0) can be super useful to use for icons without needing to load an icon font. And they can typically be styled using CSS, like:
But on iOS safari (and likely Android and other devices), these are rendered in the cartooney, emoji style — which means trying to color them with CSS doesn’t work.
Fortunately there is an easy (but cryptic) fix: Simply append
︎ immediately following your unicode character, like
■︎. The code modifies the previous character to be rendered in text style rather than emoji style.
HT Matais Singers