ウェブサイトやウェブアプリケーション制作をしていると、アイコンを表示させたい場面が出てくると思います。
アイコンとは、たとえばメールや矢印のマークだったり、TwitterやFacebookのロゴなどです。
そういったアイコン表示をさせることができるのがFont Awesomeです。
今回は、そんなWEB制作に必ず役立つFont Awesomeの使い方をまとめていきます。
Font Awesomeとは
Font AwesomeはWebサイトやアプリケーション用のアイコンライブラリで、数千もの種類のアイコンを使用することができます。
5つのタイプ
Font Awesomeのタイプは以下の5つがあります。
・Solid
・Regular
・Light
・Duotone
・Brands
SolidとBrandsのほとんどのアイコンは無料で使用できますが、その他は有料となります。
Brandsでは、TwitterやFacebookなどの企業ロゴを使用することができます。
無料版と有料版の違い
無料版と有料版の一番の違いは、使用できるアイコンの数です。
先にも述べましたが、無料版の場合はSolidとBrands以外のアイコンがほとんど使えないため、その分使用できるアイコン数は減ってしまいます。
ただ、無料版でも相当の数のアイコンを使用できますし、商用利用も可能なので、まずは無料版での利用をお勧めします。
Font Awesomeの登録方法
Font Awesomeを使用するためには登録が必要になります。
今回は無料版の登録方法を紹介します。
まず、お使いのブラウザで「Font Awesome」と検索し、Font Awesomeのトップページを開きます。
下のようなページが出てきます。
無料版を使用するために「Start for Free」を選択します。
続いて、メールアドレスの入力を行います。枠内にアドレスを記入して、右の「Send Kit Code」をクリックします。
入力したメールアドレスにメールが届くので確認してみましょう。
上の画像のようなメールが送られてきているので、赤枠で囲んだ部分をクリックします。
パスワードの設定をします。
名前を登録して完了します。
使用方法
登録が完了したら、早速Font Awesomeのアイコンを使用していきましょう。
コードの貼り付け
登録が完了すると、上のようなページが表示されます。
赤枠で囲った部分にコードが記載されているので、コピーしてアイコンを使用したいHTMLに貼り付けてください。
アイコンの選択
次に使用するアイコンを選択します。
赤枠で囲んだ部分にキーワードを入力して、アイコンを検索しましょう。
英語での検索になるため、たとえば
矢印のアイコン → arrrow
丸のアイコン → circle
といった形で検索してみてください。
ここでは、例としてFacebookのアイコンを検索してみます。
検索結果が表示されるので、使用したいアイコンをクリックします。（色が薄くなっているアイコンは有料版で使用可能になります。）
アイコンコードの貼り付け
さきほどのアイコン一覧から使用したいアイコンをクリックすると上のようなページが表示されます。右下の「Start Using This Icon」をクリックします。
すると、赤枠で囲んだ部分にアイコンのコードが表示されるのでコピーします。
あとは、お使いのエディタの<body>タグ内にコピーしたコードを貼り付ければ完了です。
