CODEWITHSUNDEEP
csscharacter-encodingcharcharacter
user007
user007

Reputation: 1683

Why is firefox coloring certain characters, and is there a workaround?

I was just writing some css when I stumbled across this weird 'thingy'. I had the following css:

div:after {
    content: '✔';
    color: red;
}

And instead of showing a red check mark it showed a green one. This only happens in Firefox. Is this some kind of bug or is this supposed to be the 'expected' result. I found a list with multiple characters which firefox converts to custom 'icons'. You can find the list here: http://www.danshort.com/HTMLentities/index.php?w=dingb

I also came up with an image showing the differences in Firefox and Chrome. enter image description here

Update:

A screenshot based on the jsFiddle provided by @LinkinTED

enter image description here

Upvotes: 0

Views: 79

Answers (2)

user007
user007

Reputation: 1683

The above behaviour occurs because the fallback fonts for these specific characters are loaded incorrectly. First it loads Segoe UI Emoji, if that doesn't exist it will load Segoe UI Symbol. The Segoe UI Emoji font (in windows 8) are pre-styled, which makes it impossible to style them with CSS. With that in mind, the solution is easy, just use the right font (Segoe UI Symbol).

Check this new Fiddle to see this solution in action. http://jsfiddle.net/tz84qqje/2/

Source: https://bugzilla.mozilla.org/show_bug.cgi?id=1054780

Upvotes: 1

Ducks
Ducks

Reputation: 19

Works fine for me when I use direct hex codes ...

div:after {
content: '✔';
color: #ff0000;
}

Upvotes: 0

Related Questions