13

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?

james.spinella
  • 241
  • 1
  • 3
  • 11

4 Answers4

21

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

font-family: 'Zapf Dingbats';
Jon Sakas
  • 2,042
  • 1
  • 21
  • 26
17

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

Matt Kahl
  • 763
  • 7
  • 9
  • You need to use `` for hexadecimal entity codes. So your first example should be `▶` and so on. – Simon Woodside Nov 16 '16 at 23:03
  • 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. – jessica Jul 01 '17 at 16:37
  • Thanks for the notes. The examples have been updated. – Matt Kahl Jul 06 '17 at 21:19
  • 1
    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. – Sprogz Sep 26 '17 at 12:18
  • @Sprogz Glad it helped! – Matt Kahl Sep 27 '17 at 16:08
5

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 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... – StackExchange What The Heck Dec 27 '13 at 17:17
  • 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. – james.spinella Dec 27 '13 at 17:28
0

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.

james.spinella
  • 241
  • 1
  • 3
  • 11