Unicode special characters on IOS Mobile Safari
Issue
I’ve created custom checkbox using unicode checkmark: ✔️
Checkbox looks like this:
It looks the same on every browser/device except IOS mobile Safari, where it looks as following:
The problem is that both screens presents
unchecked state
, but on IOS Safari it looks more like it’s checked.
It turned out, that mobile Safari is the only one which translates ✔️ into emoji, which colors cannot be changed in any way.
Solution
To prevent Safari from translating special symbols into emoji add Variation Selector-16
:
For HTML like this:
<p>✔&#fe0e;</p>
For CSS content like this:
content: '✔\fe0e'
Where fe0e
is mentioned above: Varation-selector-16
.
This variation code can be found
Here