CSS Unicode Templates / Ticks Turn Green / Red in Windows 8.1 / Firefox Version 32

Question

After upgrading to Firefox version 32, all the heavy ticks / ticks on my website were upgraded to a beautiful, non-radioactive green color.

This issue seems to be isolated for WINDOWS 8.1 and FIREFOX V32

---

UNICODE SAMPLES

(✔, ☑, ✖,)

U+237B ⍻ not check mark U+2610 ☐ ballot box U+2611 ☑ ballot box with check (GREEN) U+2705 ✅ white heavy check mark U+2713 ✓ check mark U+2714 ✔ heavy check mark (GREEN) U+2716 ✖ Heavy multiplication (RED) 

FIREFOX V32 (screenshot)

CHROME V37 (Screenshot)

This is not a problem in Firefox version 31 Ticks, which is controlled using the css color attribute, like other text.

---

Question

• How can I control the color of Unicode ticks in all popular modern browsers?
• Why why why? (I understand the default value, but redefining the settings seems illogical, I am sure that this is compensation on the part of mobile / tablets).

---

A SCREEN OF THIS REPORT SOURCE VIEWED IN FIREBUG Still green !: Oh

---

TEST AREA

Answer 1

Please review the following URL, which appears to indicate the cause of the problem: https://bugzilla.mozilla.org/show_bug.cgi?id=1054780

In particular, this post: Gijs Kruitbosch seems to be good at summing up and providing possible work:

This plays in night mode in Windows 8.1. AFAICT Segoe UI Emoji is new in Windows 8, and what causes problems here.

Perhaps there is a way to disable Windows coloring for the font (apparently it exists in XAML, but maybe only for Windows Phone, and I don’t know if they will reveal it in any other way), that would be one option.

A simpler option seems to use the Symgo UI Symbol, which has at least all of these characters (I'm unfamiliar with unicode, which I don't know if / when it is a complete replacement for the Emoji font variant and / or for ranges).

Using the Segoe UI character is supposed to work by changing the CSS in your example to:

 div { background:#111; color:#fff; font-family: Segoe UI Symbol; } 

a white tick appears again.

Updated CSS deck example: http://cssdeck.com/labs/dzemruoi

If you do not want to surround the tick in your own separate container in order to change the font-family , you can specify Segoe UI Symbol as a reserve, and the checkmark will display correctly, and the other text will be in the preferred font:

 div { background:#111; color:#fff; font-family: arial, Segoe UI Symbol; } 

Example CSS deck with different text: http://cssdeck.com/labs/gzgwlhpb