HTML unicode arrow works on Safari desktop, but no

问题:

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?

回答1:

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

font-family: 'Zapf Dingbats';

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

回答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.

回答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.