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?

Answer 1

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

font-family: 'Zapf Dingbats';

Answer 2

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'.

Answer 3

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.