::before Styling With iPad/iPhone

[toad78]

Having an issue on this page where viewing styles in iPad/iPhone for ::before content isn’t being recognized. However, it is being recognized on Android and Mac Desktop devices.

If you look in the hero section, the white checkmarks are the issue. Never encountered this before and not sure how to fix it.

Thank you.

[PaulOB]

The check mark is showing on my iPhone SE but it shows as black

It’s a bit hard to debug but I always see problems with these html entities as they depend on font installed and language etc.

I would use an image, data img or svg instead for more reliability.

I’ll try and have another look later when I can plug my phone into the Mac for debugging.

[PaulOB]

@PaulOB

I’ll try and have another look later

It seems you can’t change the color of some entities in ios.

You would need to change it to something like this I believe.

  content: "✔\fe0e"

e.g.

.chk-bullet ul li::before{
 content: "✔\fe0e";
color:#fff;
}

That works when I inject it into my iphone.

[toad78]

Thank you, PaulOB!
What’s interesting is that I have the book CSS Master, 3rd Edition by Tiffany B. Brown and haven’t seen anything regarding your suggestion above. But your reference is very helpful!

I’m always open to be schooled.

Thank you again!