[iOS開発] swiftでFontAwesomeKitライブラリを使う

おすすめ記事個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス裏話 | vdeep

Tweet

Pocket

こんにちは、okutani(@okutani_t)です。 iOSアプリを作成するとき、ちょっとしたアイコンを使いたいことが多々あるかと思います。

そんなときは「FontAwesomeKit」ライブラリを利用すると便利です。このライブラリを使うことで、数多くのかわいいアイコンが簡単に使えるようになります。

では、さっそくFontAwesomeの特徴から使い方までを見ていきましょう。

参考SwiftでFontAwesomeKitを使ってみる – Qiita

スポンサーリンク

FontAwesomeKitの特徴

FontAwesomeKitの特徴に、以下の項目が挙げられます。

label,tabber等で使えるスグレモノ。色なんかもかんたんに変えられます。

デフォルトのアイコンの数は限られていますが、500以上のアイコンが使えるようになるので、大抵これ１つで済んでしまいますね。

では、実際にFontAwesomeKitをインストールしてみましょう。

FontAwesomeKitをインストールする

インストールはCocoaPodsからおこなうことができます。まだCocoaPodsを導入していない方は、ターミナルから下記コマンドで導入しておきましょう。

$ sudo gem install cocoapods

管理情報を更新。

$ pod setup

Podfileを作成します。

$ cd ~/プロジェクトまでのパス
$ pod init

作成されたPodfileに下記を追記します。

pod 'FontAwesomeKit', '~> 2.1.0'

ちなみに、下記のフォントが一緒に入ります。

下記のように指定することで、上記のどれか1種類だけを選択して入れることができます。

pod 'FontAwesomeKit/IonIcons'

インストールを実行します。

pod install

これで、FontAwesomeKitライブラリのインストールが完了しました。

次からは「プロジェクト名.xcworkspace」を開いて作業していくので、そのまま下記を入力してプロジェクトを開くと楽です。

$ open プロジェクト名.xcworkspace

「Pods」があればOK。

FontAwesomeKitの利用方法

では、実際にFontAwesomeをswiftで利用してみましょう。

Bridging Headerを設定

SwiftでObjective-Cを動かすので、ブリッジヘッダーでヒモ付してあげます。

Xcodeからプロジェクトを右クリック→New Fileを選択。

iOS欄のSource→Objective-C Fileを選択してNext。

適当にdummy.mとか名前をつけます。

両方チェックを入れてCreate。

Bridging Headerを追加するか聞かれるのでYes選択。

Bridging Headerファイルが作成されました。dummy.mファイルは不要なので削除してOKです。

FontAwesomeを使いたい場合は、Bridging Headerファイル(Testsじゃない方：プロジェクト名-Bridging-Header.h)に下記を記述。

#import <FontAwesomeKit/FontAwesomeKit.h>

他のFontはそれぞれ下記を記述してあげればOK。

#import <FontAwesomeKit/FAKFoundationIcons.h>
#import <FontAwesomeKit/FAKZocial.h>
#import <FontAwesomeKit/FAKIonIcons.h></code>

Main.storyboardにImageViewを配置

Main.storyboardにImageViewを配置します。

適当な大きさで制約をつけます。今回は40×40にしました。

中央に制約をつけました。

制約を付け終わったので「Update Frames」しておきます。

Image ViewにFontAwesomeを紐付ける

実際にFontAwesomeを表示させていきましょう。

UIImage Viewをcontrolを押しながら選択、ViewController.swiftにドラッグ→fontという名前でoutletを作成。

viewDidLoadに記述。

override func viewDidLoad() {
    super.viewDidLoad()
    let trash = FAKFontAwesome.trashIconWithSize(40)
    // 下記でアイコンの色も変えられます
    // trash.addAttribute(NSForegroundColorAttributeName, value: UIColor.whiteColor())
    let trashImage = trash.imageWithSize(CGSizeMake(40, 40))

    font.image = trashImage
}

実行結果確認

アイコンが表示されるか確認。

40×40のゴミ箱アイコンを表示することができました。

使いたいFontを探す方法

Fontawesomeで使えるアイコンは、下記のFontawesome公式から探してきます。

LINKFont Awesome Icons

試しにコーヒーアイコンを使ってみましょう。先ほどのviewDidLoad内の「trash」文字を、コーヒーアイコンの隣の「coffee」の文字に置換してあげればOKです。

※ちなみにNew Iconsは対応していない場合があります。対応しているかどうかはPods→Pods→FontawesomeKitの中のFontawesomeKit.hファイルから確認できます

override func viewDidLoad() {
    super.viewDidLoad()
    let coffee = FAKFontAwesome.coffeeIconWithSize(40)
    // 下記でアイコンの色も変えられる
    // coffee.addAttribute(NSForegroundColorAttributeName, value: UIColor.whiteColor())
    let coffeeImage = coffee.imageWithSize(CGSizeMake(40, 40))

    font.image = coffeeImage
}

確認してみます。

時間があるときに、UIImageではなくUILabelからFontawesomeを利用方法も追記したいと思います。

Fontawesomeの使い方は以上です。お疲れ様でした。

まとめ

FontawesomeKitを使うことでかんたんにアイコン画像を使うことができました。

Fontは文字以外でもUIImageとして利用できます。

シェアする

ツイートする

Tweet

Pocket

okutani (okutani_t) のヒトコト

okutani_t

かわいいアイコンがたくさんあって良いですね。ちょっと使うだけで、アプリが一層オシャレにみえること間違いなし。

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。

「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio

---