Search code examples
androidcssunicodefontswebfonts

u+2714 chechmark showing up different shape and color in android

This question is related to this question

I am using this css :

.check li::before{
content: "\002714 \00a0";
color: green;

}

The checkmark (u+2714) is showing up well in green in chrome on PC, but on android chrome it is showing a slightly different shape, and in red! I googled the question and found the above mentioned post, wit the JSfiddle Even in the JSfiddle the checkmark is showing red on android. I have an samsung J5 android 6.0.1 and a Samsung Tab E android 4.4.4 Both give the same result. Here I add a screenshot from the JSFiddle page on my Tab Eyou clearly see the red checkmark

Here i add a screenshot of my site on PC PC screenshot and on android Android screenshot The difference is clear.

Solution

  • These checkmarks are emoji, and they're different designs on different OSes/platforms. See Emojipedia for the different version.

    The solution is to either use your own checkmark graphic (an SVG image, for instance) or use a non-emoji checkmark so you can determine the color yourself.