How do I stop iOS from converting a small pointing right triangle character into a rectangluar boxed triangle symbol?

This is not about changing font, but about unicode variation.On Unicode 6.1, one unicode code point can have multiple glyphs, and you can choose those using Variation Selectors.

For about emoji, you can use U+FE0E(@"\U0000FE0E") to choose text style graph.(And, U+FE0F(@"\U0000FE0F") is for Apple Color Emoji).

For example, LEFT-POINTING TRIANGLE's unicode code point is U+25C0(@"\U000025C0"), and you can specify not to use Apple Color Emoji but non-color symbol like @"\U000025C0\U0000FE0E".

Also, there is some difference between iOS emulator(for iOS6 on Mountain Lion) and actual device(iOS6) about Variation Selector handling, probably because Mountain Lion have more support for Unicode 6.1, I guess.

For example, if I don't specify the selectors, I see non-color triangle on iOS6 device, but Apple Color triangle on iOS6 simulator(on Mountain Lion), for UIBarButton.

So, it is nice to check both simulator and actual device, but it looks more safe to use Unicode Variation Selectors always anyway.

It was kind of challenging to force the Browser to render the HTML Entity on iPads/iPhones, but I managed to find the solution, and here's the trick.

Instead of using HTML entities directly:

&#9664; <!-- ◀ BLACK LEFT-POINTING TRIANGLE -->&#9654; <!-- ▶ BLACK RIGHT-POINTING TRIANGLE -->

I created supportive elements in HTML, with the classes:

<span class="left-pointing-triangle"> </span><span class="right-pointing-triangle"> </span>

With the use of CSS ::after pseudo-element made the override of the content:

.left-pointing-triangle::after {  content: "\25C0 \FE0E";}.right-pointing-triangle::after {  content: "\25B6 \FE0E";}

The important part is to use content: "\25C0 \FE0E", instead of just symbol itself content: "\25C0". It works flawlessly on both iPads and iPhones of different iOS versions.

I use these unicode characters to stop iOS from fiddling:

Right-triangle: ► (&#x25ba)

Left-triangle: ◄ (&#x25c4)

Update

If further triangles are what you seek:

Up-triangle: ▲ (&#x25b2)

Down-triangle: ▼ (&#x25bc)