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

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.