Ascii check mark is always red in mobile

Question

I use ✔ aka ✔ in a cross platform web app.

Problem is, I need it to be white.

This works fine as expected by setting color:#fff; in the element's css in all tested platforms except via an android mobile device - I've tried Chrome and the default browser "Internet".

Nothing I try seems to change the color, and even when I have other text in the element, the other text is white and the check mark is red.

this fiddle reproduces the issue, as does viewing this page on my phone.

My device is a Samsung Galaxy S6 SM-G920I Android 5.1.1

Answer 1

@Mr Lister is correct and the problem is that chrome 58 on Samsung Galaxy S6 Android 5.1.1 (and probably a few others) renders this unicode character as an emoji which cannot then be styled with CSS.

I had the same issue and found that the light tick U+2713 displays as a text character on this version of chrome so can be styled.

Answer 2

Heavy check mark is being displayed different for every platform. See https://emojipedia.org/heavy-check-mark.