SwiftでIconFontを使ってみる

エンジニアの渡邉です。 現在関わらせていただいているプロジェクトでIconFontを使いたいと要望があったので…

エンジニアの渡邉です。

現在関わらせていただいているプロジェクトでIconFontを使いたいと要望があったので、
色々と調べた結果を元に、実際に使ってみようと思います。

IconFontとは


Iconを文字として扱えるWebフォントで、最大の特徴は画像を用意するよりも軽いということです。

IconFontのメリット

・pngなどで書き出した画像よりも容量が軽い
・画面に合わせたサイズ毎に画像を用意しなくて良い
・フォントなので、サイズ、色別に画像を用意しなくて良い
・サイズが大きくなっても表示が綺麗

IconFontのデメリット

・色は単色のみの扱いになる

実際に使って見る


今回はFontAwesomeKitを使用して実装します。

FontAwesomeKitは現在以下フォントに対応しています。
FontAwesome 4.6
Foundation icons
Zocial
ionicons 2.0.0
Octicons 2.4.1
Material 2.0.0

1.FontAwesomeKitをプロジェクトにインストール
Cocoapodsを使用して入れていきます。
Podfileに以下を追加して、pod installすればOKです。

 pod 'FontAwesomeKit', '~> 2.2.0'

2.Bridging-HeaderでFontAwesomeKitをインポート
xxxxx-Bridging-Header.hに以下記載を追加します。

 #import <#import FontAwesomeKit/FontAwesomeKit.h>

3.UILabelで表示
今回は、FontAwesomeのStarアイコンを表示してみます。
画面にUILabelを置いて、outlet接続。

以下コードを記載します。

let starIcon = FAKFontAwesome.starIconWithSize(50.0)
self.FAKitLabel.font = starIcon.iconFont()
self.FAKitLabel.attributedText = starIcon.attributedString()

ここで、ビルドすると以下エラーでアプリがクラッシュする問題が発生。

2016-10-07 14:11:43.336 iconfont[17856:1488863] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Font file doesn't exist'
libc++abi.dylib: terminating with uncaught exception of type NSException

ググった結果、以下手順で解決しました。

■Project → Build Phases → Copy Bundle Resources → ”+”の順に選択
スクリーンショット 2016-10-07 14.15.28

■Add Othersを選択
スクリーンショット 2016-10-07 14.19.31

■”FontAwesome.otf”ファイルを選択
スクリーンショット 2016-10-07 14.26.53

■追加完了
スクリーンショット 2016-10-07 14.28.43

4.UIImageViewで表示

self.FAKitImage.image = starIcon.imageWithSize(CGSize.init(width:40.0 , height: 40.0))

5.ビルド
表示できました。左がUILabel、右がUIImageViewです。
スクリーンショット 2016-10-07 16.02.22

おまけ
addAttributeを使用することで色を変えることも可能です。
先ほどのコードに追記して、UILabelを青、UIImageViewを赤で表示してみます。

let starIcon = FAKFontAwesome.starIconWithSize(50.0)
starIcon.addAttribute(NSForegroundColorAttributeName, value: UIColor.blueColor())
self.FAKitLabel.font = starIcon.iconFont()
self.FAKitLabel.attributedText = starIcon.attributedString()
        
starIcon.addAttribute(NSForegroundColorAttributeName, value: UIColor.redColor())
self.FAKitImage.image = starIcon.imageWithSize(CGSize.init(width:50.0 , height: 50.0))

スクリーンショット 2016-10-07 16.15.24

IconFontを導入してみて

文字でも画像でもどちらでも使用でき、コードで色やサイズを設定できるのは便利でした。
アイコンの種類も豊富なので、単色のみのアイコンはIconFontを導入した方が便利だと思います。
今後の開発で積極的に使っていきたいです。