HTML unicode arrow works on Safari desktop, but not Safari for iOS

Question

I'm using the ❯ arrow on a page, and it renders properly on Chrome, Firefox and Safari on OS X, however in Safari on iOS (iPhone), the arrows render as empty boxes (you know, the "unable to render" box).

Any ideas on why this is happening and what I can do to fix it? Thanks!

EDIT:

Actually, I would greatly appreciate it if someone could offer a better solution (though I realize that might not be possible)... I don't want to @font-face or @import one, not worth the added strain on resources for three arrows... Is there arrow unicode that will work with iOS's Safari that someone can link me to? Perhaps a gallery?

Solution 1

The font Cabin Condensed (weight 600)'s closing carat (>), is exactly the same as unicode arrow "&.#.1.0.0.9.5.;" (❯).

It's free on Google Fonts!

...And since it's a font, it will work on all devices and browsers.

Solution 2

Set the font to 'Zapf Dingbats' and it will work in iOS.

font-family: 'Zapf Dingbats';

Solution 3

The "BLACK RIGHT-POINTING TRIANGLE" character has the hexadecimal index of U+25B6. It has two style variations, text and emoji, that can be explicitly specified by adding a trailing unicode character called a 'variation selector'. The hexadecimal index for these variation selectors are U+FE0E (text) and U+FE0F (emoji).

I would assert it is best to specify which variation you're hoping to render because iOS is defaulting to the emoji variation if it's not specified.

Variation   | HTML             | CSS
----------- | ---------------- | ------------
unspecified | `▶`        | `\25b6`
text        | `▶︎` | `\25b6\fe0e`
emoji       | `▶️` | `\25b6\fe0f` 

e.g.

<span>Next &#x25b6;&#xfe0e;</span>

or

<style>
  .next-label:after{
    content:'\25b6\fe0e';
  }
</style>
<span class="next-label">Next</span>

Note: FE0E and FE0F contain zeroes and not the letter 'o'.

Solution 4

Apparently the character “❯” (which not really an arrow but the Dingbat character U+276F HEAVY RIGHT-POINTING ANGLE QUOTATION MARK ORNAMENT) is not present in the fonts on iOS. The options are (in reasonability order): use a different character, or use an image, or use an embedded font.

View more solutions

Comments

[StackExchange What The Heck]

Can we see the code you're using to render it? Thanks!

[james.spinella]

It's just '❯'... I mean, it seems like maybe Safari for iOS doesn't have what you might consider the "expanded" collection of unicode?

[StackExchange What The Heck]

unsurprisingly, the greater than > character works fine on my iPad and looks rather similar. You could add a bold font-weight to it to make it a bit thicker...

[james.spinella]

Much obliged, thank you for confirming... I found it on a page for "HTML arrows", had no idea it was really from Dingbat... I'll give that > a go, I'd hate to adopt a more... "arrowy" arrow.

[Simon Woodside]

You need to use &#x for hexadecimal entity codes. So your first example should be ▶ and so on.

[jessica]

Your note at the bottom about o vs 0 helped, but you may want to update your last example, because I believe it has an o (letter) in it.

[Matt Kahl]

Thanks for the notes. The examples have been updated.

[Sprogz]

This resolved a related issue for me. I was using the unicode characters "medium black circle" and "medium white circle" as UI indicators. I did not realise there was a trailing variation selector and had just used the unicode code point in the HTML which Safari decided to display as an overly-large emoji instead of the reasonably-sized circles the other browsers displayed in my UI. The UI certainly did not benefit from Safari's choice! :( Appending the text variation selector resolved this issue for me. Thank you.

[Matt Kahl]

@Sprogz Glad it helped!