Html Unicode Arrow Works On Safari Desktop, But Not Safari For Ios

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

Solution 1:

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

font-family: 'Zapf Dingbats';

Solution 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><spanclass="next-label">Next</span>

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

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

Solution 4:

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.