Inserting a chevron into a button like Apple does?

Question

I would like to find an efficient way to add chevrons to my buttons similar to how Apple does in iTunes. For example, in the image below, you can see a chevron after the text "See All" and "Terms and Conditions." Is there a unicode character that looks like this, or if not is there an easy way to achieve the same effect?

I tried searching for unicode characters, but all the chevrons I found were either too thick, too tall, or too small.

Note: I realize I could use auto layout with a UIImageView, but that seems like overkill, especially if I want center alignment of both elements as in the "Terms and Conditions" example below. That would involve something similar such as adding a superview to the button and the image, adding the necessary constraints to size it to the subview's frames, then aligning this new superview to the center. This would produce about 8 constraints with 3 views instead of ideally 2 constraints and a single view. Plus, it wouldn't make the chevron tappable. (Not a big deal on an iPhone because of the fuzzy finger matching, but in the simulator it's noticeable.)

I'm hoping there is any easier way to do this such as using a unicode character, or adding an image directly inside the button.

Take a look at `UIButton`'s `titleEdgeInsets` and `imageEdgeInsets` properties. — Fahri Azimov, Nov 23 '15 at 05:11

score 1 · Accepted Answer · edited May 23 '17 at 10:28

I just noticed they have similar icons on their website:

In this case, they created a custom font appleicons_text:

They then add the more class to any element that needs a chevron. The relevant CSS class that actually adds the chevron is:

.more:after {
    font-family: as-AppleIcons;
    content: ""
}

Note that the content looks empty, but there is actually a hidden chevron character near the second quote. If you have the font installed, you should presumably see the chevron icon. (Pasting that line into text edit will reveal a question mark character.)

Finally, they ensure that the as-AppleIcons will show in your browser:

@font-face {
    font-family: as-AppleIcons;
    url(assets/ac-appleicons/fonts/appleicons_text.ttf) format("truetype")
}

Note: I omitted a bunch of css code that wasn't directly relevant to this answer.

There is a possibility that Apple imported this font into iOS and is using an NSAttributedString to produce the same effect.

Update: It looks like there is an open source project that does something similar called Font Awesome with over 650 icons so far.

Inserting a chevron into a button like Apple does?

1 Answers1