iOS 9 removed the possibility to change certain symbol colors using CSS

Question

We\'ve been using various symbols such as checkmarks (✔) on our website and just noticed that with the release of iOS 9, Safari and other browsers have been updated to not r

Answer 1

In iOS 9, U+2714 HEAVY CHECK MARK is included in Apple's set of emoji characters. Just like the other emojis, it's drawn as a full-color bitmap instead of a single-color vector glyph, so you can't change its color with CSS. (In fact, there's no guarantee that the check mark will even be black. Other platforms draw it in a variety of different colors!)

To get iOS to draw the check mark as regular text that you can recolor, you need to use a U+FE0E VARIATION SELECTOR-15 character. If you put that variation selector character right after a ✔, iOS will use the regular text version (✔︎) instead of the emoji version (✔). OS X doesn't have an emoji variant, so these look the same, but on iOS the variants look slightly different:

In HTML, you can add the character by putting a ︎ directly following your check marks.

div {
  color: red;
}

<div>
  ✔ without variation selector<br>
  ✔&#xfe0e; with variation selector
</div>

Answer 2

If you are trying to style the element using CSS-after, this is how to do to make sure that the icon gets green in iOS. With only "✔" the iOS will not change the color of the icon.

.myElement:after {
  color:green;
  content: "✔\fe0e";
}