【Font Awesome】探すのがちょっと面倒な便利フォントアイコン80個まとめました

こんにちは。ビーズクリエイトの野尻です。

サイト制作において、適切なアイコンの導入は、ユーザーの使い勝手やデザイン性の向上のためにとても大切です。
ひと昔前までは、アイコンをWebサイトに適用するときには、イラストレーターでデザインして、それを画像として切り出して、サイトにimgタグで適用する、、、というような面倒な手順を踏んでいたのですが、今は便利なもので、「フォントアイコン」を活用することで、予め用意されたアイコンリストの中から、簡単にフォントアイコンをサイトに適用することができます。

サイト制作において、もはや手放せないFont Awesome

フォントアイコンは無料のものだけでも色々リリースされているのですが、私がよく利用しているのはその中でも著名な「Font Awesome」です。
Font Awesomeは2017年7月現在で675のクオリティの高いフォントアイコンを無償で利用することができます。

たくさんありすぎて探しづらい

しかしフォントを使うとき、公式サイトでイメージを検索できるものの、英語検索のみ対応のため微妙に探しづらい、、、。
検索では出てこなかったけれど一覧を眺めていると「これだよこれ!」というアイコンが見つかることが結構あります。
そんなわけで今後の作業効率アップのために、よく使うアイコン、これから使ってみたいアイコンなどをピックアップしてみました。

住所・電話・FAX・メール


Unicode:f095

Unicode:f10b

Unicode:f098

Unicode:f041

Unicode:f1ac

Unicode:f0e0

Unicode:f003

Unicode:f2b6

Unicode:f2b7

やじるし系


Unicode:f107

Unicode:f104

Unicode:f105

Unicode:f106

Unicode:f063

Unicode:f060

Unicode:f061

Unicode:f062

Unicode:f0d7

Unicode:f0d9

Unicode:f0da

Unicode:f0d8

メニュー・UI


Unicode:f0c9

Unicode:f08e

Unicode:f14c

Unicode:f013

Unicode:f085

Unicode:f071

Unicode:f06a

Unicode:f07a

Unicode:f00d

Unicode:f00c

Unicode:f004

Unicode:f015

Unicode:f05a

Unicode:f023

Unicode:f13e

Unicode:f007

Unicode:f0dc

Unicode:f26c

Unicode:f009

Unicode:f00a

Unicode:f039

Unicode:f002

Unicode:f00e

Unicode:f010

移動手段


Unicode:f1b9

Unicode:f239

Unicode:f206

Unicode:f1ba

Unicode:f072

その他使い所がありそう


Unicode:f183

Unicode:f1ae

Unicode:f182

Unicode:f27a

Unicode:f0e5

Unicode:f121

Unicode:f0f5

Unicode:f1c1

Unicode:f1c3

Unicode:f1c5

Unicode:f1c6

Unicode:f024

Unicode:f07c

Unicode:f2b5

Unicode:f0ad

Unicode:f10a

Unicode:f0c6

Unicode:f011

Unicode:f200

Unicode:f021

Unicode:f0eb

Unicode:f109

Unicode:f1f8

Unicode:f10e

Unicode:f080

Unicode:f073

Unicode:f133

Unicode:f1bb

Unicode:f2dc

Unicode:f0c2

野尻

この記事を書いた人: 野尻

ビーズクリエイト Webに関する色々を担当しています。

あわせて読みたい