読者です 読者をやめる 読者になる 読者になる

iOS で FontAwesome を使う方法

はじめに

Inkscape でツールバー用のアイコンを作成していたけど、 すべてのアイコンで通常用とRetina用の2種類作成する必要があってウンザリ。

アイコンが必要になるたび思う。 「FontAwesome みたいなアイコンフォントが使えれば」って。

FontAwesome+iOS があった

FonAwesome+iOS はその名の通り、iOS アプリで FontAwesome を使うためのライブラリ。

デザインが苦手な俺歓喜。

FontAwesome+iOS のインストール

CocoaPods に対応しているので、Podfile に

pod "FontAwesome+iOS"

を追加して

pod install

を実行すればインストール完了。

あとは、<アプリ名>-Info.plist の「Fonts provided by application」に FontAwesome.ttf を追加。 これを忘れると肝心のアイコンが表示されないので注意すること。

UIBarButtonItem で FontAwesome を使う

UIButton や UILabel は README 読めば OK。 UIBarButtonItem で使うのは苦労したので、やり方をメモしておく。

#import "DetailViewController.h"
#import <FontAwesome+iOS/NSString+FontAwesome.h>
#import <FontAwesome+iOS/UIFont+FontAwesome.h>

@implementation DetailViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIBarButtonItem *editButton= [[UIBarButtonItem alloc] init];
    [editButton setTitleTextAttributes:@{
                   UITextAttributeFont: [UIFont fontWithName:kFontAwesomeFamilyName size:18],
              UITextAttributeTextColor:[UIColor whiteColor]}
                              forState:UIControlStateNormal];
    editButton.title = [NSString fontAwesomeIconStringForEnum:FAIconEdit];
    
    [self.navigationItem setRightBarButtonItem:editButton];
}

@end

フォントなので、色を変更したければ文字色を変更するだけ。

Retina に対応する場合は、Retina かどうか判断して、Retina のときは size を 2 倍にすればよさそう。

まとめ

エンジニアにとって iOS で FontAwesome が使えるのはありがたい。 CocoaPods に対応しているので導入も簡単。 今後は積極的に FontAwesome 使っていこう。

FontAwesome+iOS は、チームにデザイナがいる場合でも、プロトタイプ作る際に使えると思う。