Why does my character escape not display on Android devices?

Question

I am trying to add a downwards triangle arrowhead after my menu links. This works fine on desktop however whatever method I use I cant get it to show up on Android devices. I have tried a few methods of displaying the character however it is looking like I may have to resort to displaying it as an image.

I did a bit of research and I came across this article about character escaping in CSS so I have tried that but I get the same result.

My current CSS using the character escaping for the arrow is this:

body header nav .nav-item.dropdown .nav-link:after {
    content: "\01F893";
    color: #fff;
    position: absolute;
    padding-left: 5px;
    top: 6px;
    font-size: 26px;
}

Based on this question it seems possible that the character is not supported on Android devices but I couldn't find a good reference for what is and isn't supported on the Android browser/ device.

Answer 1

Ok I solved it. The Unicode character U+1f893, and all of the Supplemental Arrows-C block, is not supported on the Huawei P9. I assume this is the same for all android devices but a bit of research has led me to believe it varies between devices.

If you encounter a similar problem with a Unicode character you can check if it is supported with an android device and the google play app Unicode Map .

This app is just a standard Unicode reference however unsupported characters obviously aren't displayed properly so you can use it to check if your phone has the character you are after.

My solution to this problem was to replace the character with an image. You can get any Unicode character as an SVG or PNG from this searchable index .

Alternatively if you are using lots of unsupported Unicode characters you can use a custom font stack which I found this guide or you could create a custom icon set using something like this: https://icomoon.io/app/#/select

I hope this helps anyone else who has the problem. If you decide to use a custom font, icon set or font stack and see something I have missed then please edit my answer or comment and I will update my answer accordingly.