Help us understand the problem. What is going on with this article?

iOSでFont Awesomeを使う

More than 1 year has passed since last update.

iOSでFont Awesomeを使う

by takasek
1 / 30

はじめに

これは 2018/2/23 の
ROPPONGI.swift 第1回 - connpass
発表資料です。


image.png


これ? UIBarButtonSystemItem ですね🤓
https://developer.apple.com/documentation/uikit/uibarbuttonsystemitem


🙅


UIBarButtonSystemItem で使えるアイコンはこれだけ

image.png

https://developer.apple.com/documentation/uikit/uibarbuttonsystemitem より


小規模でデザイナーが
確保できないプロジェクトだったり

今すぐイイ感じのアイコンを求める
スピード感を優先したいプロジェクトだったり

そんなあなたの強い味方


Font Awesome


https://fontawesome.com/
image.png


Font Awesome 5 (2018/2 現在)

  • Version 5.0.6
  • 2316 のアイコン
    • Free で使えるアイコンは 929個

Style

  • Solid (塗りつぶし)
  • Regular (白抜き)
  • Light (線が細い・Proのみ)
  • Brands (各種ロゴ)

こういう感じ
image.png


image.png

  • 基本は Solid
  • 白抜きの Regular が提供されている場合も
  • Brands は必要ならお好みで

導入方法


1) ダウンロード

image.png


2) プロジェクトにバンドル
image.png

※ 3ファイル揃ってないといけないわけではない
Solidだけ入れるとかでも可


3) Copy Bundle Resources への追加も忘れない
image.png


4) Info.plist に Fonts provided by application 追記
image.png

  <dict>
+   <key>UIAppFonts</key>
+   <array>
+       <string>Font Awesome 5 Free-Solid-900.otf</string>
+       <string>Font Awesome 5 Free-Regular-400.otf</string>
+       <string>Font Awesome 5 Brands-Regular-400.otf</string>
+   </array>

print(UIFont.familyNames)
["Copperplate", "Heiti SC", "Apple SD Gothic Neo",
 "Thonburi", "Gill Sans", ... "Trebuchet MS",
 "Font Awesome 5 Free", ...] 👈🎉

print(UIFont.fontNames(
    forFamilyName: "Font Awesome 5 Free"
))
print(UIFont.fontNames(
    forFamilyName: "Font Awesome 5 Brands"
))
["FontAwesome5FreeSolid", "FontAwesome5FreeRegular"]
["FontAwesome5BrandsRegular"]

使ってみる


label.font = UIFont(name: "FontAwesome5BrandsRegular",
                    size: 100)
label.text = "github"

image.png


https://fontawesome.com/icons?d=gallery

image.png


薄いラッパーを用意する


public struct FontAwesome {
    public enum Style {
        case solid, regular // brands はお好みで

        public var fontName: String {
            switch self {
            case .solid: return "FontAwesome5FreeSolid"
            case .regular: return "FontAwesome5FreeRegular"
            }
        }
    }
    public static func font(size: CGFloat, style: Style = .solid) -> UIFont {
        return UIFont(name: style.fontName, size: size)!
    }

    public struct Icon {
        let code: String

        public static let cog = Icon(code: "cog")
        public static let star = Icon(code: "star")
    }
}

extension NSAttributedString {
    public static func icon(
        _ icon: FontAwesome.Icon,
        size: CGFloat,
        style: FontAwesome.Style = .solid)
        -> NSAttributedString {
        return NSAttributedString(
            string: icon.code,
            attributes: [
                .font : FontAwesome.font(size: size, style: style)
            ]
        )
    }
}

extension UIBarButtonItem {
    public convenience init(
        icon: FontAwesome.Icon,
        closure: @escaping (UIBarButtonItem) -> Void
        ) {
        self.init(title: icon.code,
                  style: .done,
                  closure: closure) // ※

        let states: [UIControlState] = [
            .normal, .highlighted, .disabled, .focused
        ]
        states.forEach {
            self.setTitleTextAttributes([
                .font : FontAwesome.font(size: 26)
                ], for: $0)
        }
    }
}

※ UIBarButtonItem のハンドラをクロージャで書くために、ActionClosurable を利用しています。


navigationItem.rightBarButtonItem
 = UIBarButtonItem(icon: .cog) { _ in
    print("tapped!")
}

inline


もうちょっと大層な Font Awesome ラッパーのライブラリがGitHubに転がってたりもするけど、そこまでやるのはオーバーだと思う(IMO)


そんな感じで
楽しくアイコン活用しつつ
アプリを作っていきましょう

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away