Checkmark symbol not inheriting color in iOS (WebView page)

Question

On iOS Mobile app, for webview page, the checkmark is not inheriting color of the parent element (div). The code that I'm using is:

<div style="color: red">
    &#10004&#xfe0e;
</div>

I am aware of this problem happening on iOS devices, but for me, even after appending the variation selector, the checkmark is still rendering as an emoji, which prevents changing the color.

Any ideas why this might be happening?

AkshayArora could you try out the recommended solution – Uwe Jan 06 '23 at 10:42 — Uwe, Jan 06 '23 at 10:42
@Uwe Would deploy and let you know in about a week or so. – Akshay Arora Feb 01 '23 at 13:42 — Akshay Arora, Feb 01 '23 at 13:42

score 1 · Answer 1 · answered Dec 31 '22 at 17:36

There are a few potential reasons why the checkmark might not be inheriting the color of the parent element in your WebView page on an iOS mobile app. Here is two solutions I have in mind:

You can use a character for the checkmark instead of an HTML entity:

<div style="font-family: 'Font with checkmark'; color: red;">✔</div>

Use the color property of the style attribute to set the color of the checkmark directly:

<div><span style="color: red;">&#10004&#xfe0e;</span></div>

Hope this help,

score 0 · Answer 2 · answered Jan 08 '23 at 04:01

0

<div><span style="color: red;">&#10004&#xfe0e;</span></div>

answered Jan 08 '23 at 04:01

kabiru

1
1

Checkmark symbol not inheriting color in iOS (WebView page)

2 Answers2