I want to use the character ⯈ as a ::before pseudo element. I tried both, content: “⯈” and the CSS escape sequence content: “\2BC8” and neither works. It displays correctly in desktop either way though. I tried safari and chrome in iOS and Android respectively, they both show a square instead. I tried it as something beside a pseudo element and it doesn’t work either using ⯈ or the HTML escape sequence ⯈.
Try making the triangle in CSS instead.
http://apps.eky.hk/css-triangle-generator/
1 Like
Interesting, I’ll take a look.
Also I solved the problem by using \25B6 instead of \2BC8. No idea why such a similar one works. I had to edit it slightly since it’s bigger. Still would like to know why the other one doesn’t work though.
It is system dependant and also has to do with the font used. On my system, it does not show up. This page has an image showing it missing on both Android and iOS.
I can’t really give you a great answer but to say they are in different categories. One is in the Geometric Shapes category and the other is in the Block Elements category (Unicode font: 2580–2DFF)
I would not rely on the system or font for graphical elements on a page. It would be better to use an icon/SVG or make it in CSS.
Nice page. The other one I mentioned, \25B6, looks fine in my app on all my actual devices. It also displays on the page you linked to, except that on that page it looks different for iOS (while it looks like just a black arrow on my iPad in Safari). I might be better off just not relying on those characters as you suggest.