最近、サイト上でこういったアイコンを目にする機会が多くなったと思いませんか？↓
画像のように見えるこれらのアイコンですが、実はこれ、画像ではなくFont Awesome（フォントオーサム）というフォントなんです。
洗練されたシンプルなデザインで、サイトをちょっとオシャレに仕上げてくれる、アイコンフォント・Font Awesomeについて紹介します。
もくじ
Font Awesomeとは？
前述の通り、Font Awesomeとはこのような アイコン（ピクト）を表示してくれるアイコン風フォントのことです。
フォントというと明朝やゴシックなど、文字の書体デザインのことを指しますが、Font Awesomeは文字の代わりにアイコンのデザインを定義したWebフォントです。
2017年3月現在、Font Awesomeには675種類ものアイコンが登録されています。
Font Awesomeを使うメリットは？
オンライン上にはフリーのアイコン素材があふれていて、いくらでも自分好みのアイコン画像を見つけることができます。
画像ではなくFont Awesomeを使うメリットは何があるのでしょうか？
同じスタイルのアイコンで統一できる
アイコン画像は非常にたくさんの種類がオンライン上に存在していますが、複数のアイコンを使用したい時に、同じスタイルで揃えられないときってありますよね。
例えばPCの画像はこんなテイスト 
だけど、スマホの画像はこういうテイスト
の画像しか見つからなかったり…
Font Awesomeを使用すれば同じスタイルで統一できます。
各所から画像を探してくる必要がない
そしてもちろん、自分が使いたい画像に出会うまで、ネット上で血眼になって画像を探す、という不毛な時間を無くすことができます。
オンライン上での情報収集って本当に時間泥棒です。
CSSでカスタマイズ出来る
そして一番のメリットは、自分の好みにあわせて大きさや色などをCSSでカスタマイズできること。
これはFont Awesomeが「フォント」だからこそできる技ですよね。
大きくしてみたり →
色を変えてみたり
解像度の心配がない
Font Awesomeはベクター形式でできています。
したがって拡大した時に画像データのように解像度が足りず、荒く表示されてしまう、といった心配がありません。
Font Awesomeにはどんなアイコンがあるの？
現時点での最新バージョン、Font Awesome4.7.0には675種類ものアイコンがあります。その幾つかをご紹介します。
矢印アイコン
WEBアプリケーションのアイコン
くらしのアイコン
ブランドのアイコン
全てのアイコンはFont Awesomeのアイコン一覧ページで確認できます。
Font Awesomeはどうやって使うの？
Font Awesomeの使い方には2種類あります。
一つはフォントデータをダウンロードして使う方法、そしてもう一つはCDNを利用する方法です。
CDNとはコンテンツ・デリバリー・ネットワークの略で、このCDNを利用すればわざわざフォントデータをダウンロードする必要もなく、簡単にFont Awesomeを使うことができるようになります。
Font Awesomeのこちらのページにメールアドレスを入力すると、最新バージョンのコードが送られてきます。
そのコードを<head>内にペーストすればFont Awesomeの使用準備は完了です。
表示させたいアイコンをこちらのアイコン一覧のページから探し、記載されているコードをコピペするだけで、アイコンを表示させることが可能です。
たとえばこのベルのマークはこのようなコードを入力することで表示されています。
<i class="fa fa-bell" aria-hidden="true"></i>詳しい設定の方法はこちらの記事で解説していますので、参考にしてみてください。
まとめ
画像ではなくフォントとしてアイコンを表示させることができるFont Awesome.
サイトを運営していく上ではMUST HAVEのツールなので、ぜひ使い方をマスターしてください。
コメントを残す