10

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

pstanton
  • 35,033
  • 24
  • 126
  • 168
  • Can you show some code? It doesn't happen on my Android devices with [this fiddle](https://jsfiddle.net/MrLister/xy0u4e7e/1/)... – Mr Lister Apr 12 '16 at 08:03
  • your fiddle reproduces the issue for me. i'll post my device versions. – pstanton Apr 12 '16 at 10:38
  • My Samsung Galaxy Tab S3 doesn't have the issue, and neither does my phone, a HTC One. Is your issue similar to http://stackoverflow.com/q/31271454/1016716 ? – Mr Lister Apr 12 '16 at 11:04
  • 1
    Yes i think it's the same issue. ... is my phone being too clever and converting the character to an emoji image? If so that is very stupid! – pstanton Apr 12 '16 at 12:14
  • The accepted answer is not the correct solution-- scroll down to see Buster C's answer. Basically there are two checkmark characters in unicode and one of them is problematic on mobile. Use ✓ instead (this is the correct character....[here](https://www.fileformat.info/info/unicode/char/2713/index.htm) is its page.) – temporary_user_name Nov 12 '18 at 00:40

3 Answers3

5

@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.

Buster C
  • 61
  • 1
  • 3
2

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

MarkM
  • 43
  • 1
  • 7
1

You could give your check icons span id's and then use the !important attribute to force the span's colour. If that doesn't work, you could skip the trouble completely and use an icon from Font Awesome.

Here's a Fiddle explaining what I mean:

JSFiddle

Bradley
  • 132
  • 3
  • 15
  • 1
    The `id important` doesn't seem to help but font awesome does .. thanks. I guess it's a choice between that or an image – pstanton Apr 12 '16 at 20:05