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;}

Infeasible

Can you share a screenshot of the original content. For me, it looks like a yellow color, which you see in the quoted text here on SO – Pinhole

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>

Aldarcy

That's not the answer to the question but more kind of an "ugly" workaround. – Heartsease

still doesn't answer the question. The question was not how you can make pseudo element text red but why it is red or black on some mobile phones although there is set another color (for example #ccaa88). – Heartsease

Because, As I said, the mark character you used is not a glyph anymore. It's now an emoji image produced by phone constructors. So they are free to design their emoji as they want (with black, red, pink or other colors if they want). That's why we may misunderstanding the sens of one emoji depending on the platform where we see it. dailymail.co.uk/sciencetech/article-3535858/… – Aldarcy

Now it all makes sense. Thanks for your effort! :-). – Heartsease

content: '\2714 \fe0e'; this worked for me. thank you – Idiosyncrasy

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>

Manella

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>

Aam

That's not the answer to the question but more kind of an "ugly" workaround. – Heartsease