[Resolved] Color not applied to list item bullets on iPhone Chrome or Safari

[Henk]

Hello,

For a website build in WordPress with Gutenberg blocks, I have a question.
I would like to replace the bullets of a ListItems block with checkmarks, I’m using the following CSS.
On browsers with Windows as OS, the CSS works. But on an iPhone with Chrome and Safari, the checkmarks are grey not green.

I’m using the latest versions of GeneratePress en GenerateBlocks.
In GeneratePress I added the CSS to styles.css and in GenerateBlocks I link to the CSS rule (Additional CSS class).

What do I need to do to get the checkmarks green instead of grey on iPhones?

.entry-content ul.checklist {
list-style: none;
}

.entry-content ul.checklist li {
position: relative;
}

.entry-content ul.checklist li::before {
content: “\2714”;
color: #228B22;
display: inline-block;
width: 1em;
margin-left: -1.5em;
margin-right: 0.5em;
}

Thanks in advance,
Henk.

[David]

Hi there,

the /2714 Heavy Check Mark character gets replaced on mobile browsers with their own ’emoji’ character.So its no longer a glyph that can be styled.

Options:
use /2713 – as that doesn’t get converted.
Or apply a variant to the /2714 code:

content: "\2714 \fe0e";

[Henk]

Hi David,

Thanks! It works. I had never thought about this.

Cheers,
Henk.

[David]

You’re welcome !

[Author]

Posts