li :before content: "✔ "; different color on some mobile devices

Question

I write css to make li tags better.

Everything is ok on laptop and my mobile phone(lenovo vibe 1) and asus zenfone 5

But when Itested on Iphone 5 and Galaxy Note3 my color (rgb(240, 230, 140)) shown as red and black.

I don't know what is wrong with my css. Should I use image istead of css or Is there a solution with css? Thanks.

Here is my css:

ul.anamenu li::before {
content: "✔ ";
color: rgb(240, 230, 140);
font-size: 4vmin;
text-indent: -2em;}

Answer 1

Try to add font-family: 'Zapf Dingbats' on ul.anamenu li::before. It works well on iPhone.

EDIT: JUN 26 '17

The issue exists because this character is now an emoji drawn by Apple (and other constructors). On emojipedia website, you can see some variations of this emoji.

So, your rendered character is a bitmap image on your device and not a vector glyph that you could change color. Constructors or platforms that implements emojis are free to design their own emojis as they want (with black, red, pink or other colors if they want). That's why we may misunderstanding the meaning of one emoji depending on the platform where we see it.

There are currently 1,282 emoji in the Unicode standard, set by the Unicode Consortium, which provides a name, such as U+1F600 for 'grinning face,' but critically doesn't dictate what the emoji should look like.

To change color of this character, you have to work on text. So, you can use a variation selector 15 directly after the check mark to get a regular text version: ✔︎ (in HTML). Some exemples for differents languages here.

By the way, concerning Heavy Check Mark, you can try this solution using variation selector content: "\2714 \fe0e";. As you see, there are unicode symbole in CSS: '\2714' and the VARATION SELECTOR '\fe0e' directly after.

.unicode:after{
  content: '\2714 \fe0e';
  color: red;
}

<div class="unicode">
</div>

Answer 2

As Alex - DJDB said you can't change the color of this html symbol. But You can use another. Using ✓ check mark (U+2713) allows you to change the color of the symbol.

I found it here: https://graphemica.com/%E2%9C%93

html {
  color: red;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

<p>✓ check mark (U+2713)</p>
<p>✔ heavy check mark (U+2714)</p>

Answer 3

you can use FontAwesome

ul {list-style: none;}
ul li{position: relative;padding-left: 20px}

 ul li:after{
 content: '\f00c';
 font-family: FontAwesome;
 position: absolute;
 left: 0;
 top: 0;
 color: red
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
  <li> test  </li>
  <li> test  </li>
  <li> test  </li>
</ul>