CSS Unicode checkmarks/ticks have turned green/red in Windows 8.1/Firefox Version 32

Question

After updating to Firefox version 32, all the heavy checkmarks/ticks in my website have been updated to a lovely none conforming radioactive green colour.

This issue seems isolated to 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 was not the issue in Firefox version 31 Ticks where managed using css color attribute like other text.

---

QUESTION

1. How can the colour of unicode ticks be managed in all popular modern browsers?
2. Why, why, why? (I can understand a default but overiding settings seems illogical, I bet this is a mobile/tablet compensation).

---

SCREENSHOT OF THIS POST'S SOURCE VIEWED IN FIREBUG Still Green! :o

---

TEST AREA

Answer 1

Please see the following URL which would appear document the cause of the issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1054780

In particular this post by :Gijs Kruitbosch seems to sum up the issue well and provides a possible work around:

This is reproducible on Nightly on Windows 8.1. AFAICT Segoe UI Emoji is new in Windows 8, and that's what's causing issues here.

There might be a way to turn off Windows's coloring for the font (apparently this exists in XAML, but perhaps only for Windows Phone, and I don't know if they expose that any other way), which would be one option.

The simpler option seems to be using Segoe UI Symbol instead, which has at least all of these characters (I'm unfamiliar enough with unicode that I don't know if/when this is a complete substitution for the Emoji variant of the font, and/or for what ranges).

The suggestion to use Segoe UI Symbol does appear to work, changing the CSS in your example to:

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

results in white ticks again.

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

If you don't want to surround the tick in it's own individual container to change the font-family it is possible to specify Segoe UI Symbol as a fallback and the tick will still appear correctly while the other text will be in the preferred font:

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

CSS deck example with other text: http://cssdeck.com/labs/gzgwlhpb