デザイナーのうえつです。
デザインを効率よく早く作業するためには、引き出しはかかせません。
普段から、使い慣れたものや新しいものをストックしていくことはとても重要です。ほしい材料がなかったら、素材を探すだけで大幅な時間のロスですよね。
よく使うものと言えば、アイコンもそうではないでしょうか
SNSのロゴや、三角の矢印、メールのアイコンや、電話のアイコン・・・
画像で使う場合は、ビットマップデータである限りどうしても荒くなるしコーディング上でも少しでもpxがずれていたら面倒なやりとりになります。
そんな時、強い味方「Font Awesome！」（フォントオーサム）Font Awesomeはフォントと一緒でベクターデータなので、cssで設定できて荒れ知らず！ソースも簡単な記述なので、とても便利です。
有料アイコンと無料アイコンがあるんですが、無料アイコンもかなり豊富でまったく困りません。
一行の記述でアイコンが表示されるし、全然難しくないのにこのクオリティ！
https://fontawesome.com/icons?d=gallery
ただ、検索が英語サイトなので見つけたいアイコンにヒットさせるために英単語の内容をあれこれ考えて調べるセンスがいります。
わたしもFont Awesomeはコーディングでは使ったことあったんですが、コーディング前のデザインカンプには使ったことがありませんでした。
しかしXDやPhotoshopで作るデザインカンプで使うベクター画像SVGファイルをダウンロードできることを知ったのです。
またデザインカンプがOKになりコーディングの作業に移るとき、ダウンロードしたFont Awesomeのアイコンのファイル名は、同サイトから検索してソースを探すヒントにもなります。
最近勉強のためにトレースしているのですが、すでに公開されているサイトなので要素検証でソースコードもチェックしています。
Font Awesomeは、たくさん使用されていてすごく小さくポイントで使っている部分などもあり（もちろん荒れることはないし）こういった使い方、配置、サイズ感があるんだなーと新しい発見だらけです。
実にシンプルで、それでいて美しい。存在感がある。そしてしまる。
わたしは、ダウンロードしたものをちょこちょこライブラリに格納しています。
いつも使うアイコンはライブラリからドラックしてファイルに持ってこれるので作業効率もいいです。
Awesomeって「おどろくばかり」って意味だそうです。
なんて素敵な名前なんでしょうね。
追記
また、Font AwesomeはPCにダウンロードすることで、フォントとして使用することもできるそうです！
チートシートから必要なアイコンを呼び出す形ですが、コーダー側や、他の作業者にフォントがインストールされていないと文字化けの原因にもなるので、その場合はラスタライズする必要があります。
