1. FONT AWESOMEとは
FONT AWESOME（フォント・オーサム）は、Webサイト上で虫眼鏡や矢印、SNSのロゴなどのアイコンを画像ファイル（PNGやJPEGなど）を使わずに表示できるWebアイコンフォントサービスです。
出典 : Font Awosome
2. FONT AWESOMEの特徴
画質が劣化しない
フォント（文字）データとして扱われるため、スマートフォンやパソコンの高解像度ディスプレイ（Retinaディスプレイなど）で拡大しても、ぼやけず綺麗に表示されます。
デザインの変更が容易
通常の文字と同様に、CSSを使って色、サイズ、影、回転などの装飾を自由に変更できます。
豊富なアイコン
無料版（Free）でも多くのアイコンが利用可能であり、商用利用も可能です。
3. FONT AWESOMEの使い方
公式サイトでアカウントを作成し、専用のCDNコードをWebサイトのHTMLに埋め込むことで、指定のタグを記述するだけで簡単にアイコンを表示できます。
3-1. アカウント設定
FONT AWESAMEのWebサイトにアクセスし、トップページのStart Freeボタンをクリックします。アカウント設定ページが表示されるので、指示に従って入力していきます。必要なのは、メールアドレス、パスワードと、ユーザー名の設定です。
Star Freeボタンをクリックします。
アカウント設定ページが表示されるので、指示に従って入力していきます。
3-2. CDNコード取得
アカウント設定が終了したら、ログインしてCDNコードを取得します。
FONT AWESOMEのWebサイトのトップページのYourKitsボタンをクリックします。使用するKitsのボタンをクリックします。CDNコードが表示されるので、コピーして、WebサイトのHTMLのheadにペーストします。
YourKitsボタンをクリック
使用するKitsのボタンをクリック
CDNコードをコピーして、WebサイトのHTMLのheadにペースト
3-3. アイコン設定
FONT AWESOMEのサイトからアイコンを選び、コードを取得し、設置したい場所に設置します。
トップページのIconsをクリックします。アイコンページが表示されるので、無料で利用できるCLASSCボタンをクリックします。
アイコン一覧が表示されます。上のFreeボタンをクリックして、無料で使えるアイコンのみ表示します。使用したいアイコンをクリックします。アイコンのHTMLコードが表示されるので、Webサイトの表示したい場所に、コピー＆ペーストします。スタイルは、テキストと同じようにCSSで色(color)や大きさ(font-size)などを設定します。
Iconsをクリックします。
CLASSCCボタンをクリック
Freeボタンをクリック
使用したいアイコンをクリック
HTMLコードをWebサイトの表示したい場所に、コピー＆ペースト
4. メニューアイコン
Webサイトで使いやすいアイコンをカテゴリーに分けて紹介します。まず、メニューボタンで使いやすくて、認知されやすいベーイックなアイコンを紹介します。
出典 : house
houseは、トップページのメニューのアイコンとして利用できます。
出典 : map
mapは、マップ、アクセスページのメニューアイコンとして利用できます。
出典 : envelope
evelopeは、メール、コンタクトページに利用できるアイコンです。
出典 : building
buildingは、会社概要ページのアイコンとして利用できます。
出典 : newspaper
newspaperは、ニュースページのアイコンとして利用できます。
出典 : user
userは、ユーザーアイコン、自己紹介ページのアイコンとして利用できます。
5. 投稿ページアイコン
ニュース、ブログなどの記事や、リンク、ランキングなどで役にたつアイコンを紹介します。
出典 : crown
crownは、人気記事、ランキングなどのアイコンに利用できます。
出典 : award
awardは、人気記事、ランキングなどのアイコンに利用できます。
arrow-uo-right-from-squareは、別窓リンクの、キャプションに付けるアイコンに利用できます。
6. UIアイコン
スライダー、ギャラリー、スクロールなど、Webサイト内のUIで使用できるアイコンを紹介します。
出典 : angle-left
angle-leftは、スライダーの、前のスライドへ移動するアイコンに利用できます。
出典 : angle-rigjht
angle-rightは、スライダーの、次のスライドへ移動するアイコンに利用できます。
出典 : circle-chevron-up
circle-chevron-upは、ページのトップへ移動する、To Topアイコンとして利用できます。
7. まとめ
以上で今回のBLOGは終了です。HTMLに埋め込む場合、アカウント作成をしなければ、使用できませんが、短いコードを挿入するだけで使えるので便利なアイコンです。また、大きさや色をCSSで変更できるので、大変便利です。無料アイコンでも使える種類が、多いので、サイトのデザインに合わせて取り入れてみてはいかがでしょうか。
