• コーディング ファクトリーHOME
  • Coding Methodology
  • 第92回 アイコン設置に便利な「Font Awesome」の使い方

コーディングメソドロジー

第92回 アイコン設置に便利な「Font Awesome」の使い方

このような「>」矢印アイコンや三本ラインのハンバーガーアイコンは、多くのサイトで見かけます。今回は、これらのアイコン画像を作成せずに簡単に設置することができる「Font Awesome」を紹介したいと思います。

そもそも「Font Awesome」とは

「Font Awesome( http://fontawesome.io/ )」とは、文字ではなく、見た目がアイコンのような無料で使えるweb フォントです。アイコンの種類も600 種類以上と豊富で、導入も簡単で手軽に設置できるため、最近はコーディングファクトリーでも「アイコンはFont Awesome を使ってコーディングをお願いします」というようなクライアント様からのご要望が増えています。

「Font Awesome」のメリット

上記の通り、「Font Awesome」は画像ではなくフォントなので、css での装飾が容易にできます。
例えば、font-size を変更すれば大きさも変えられますし、color を変更すれば色も簡単にカスタマイズできます。また、アイコンを画像として扱う場合はRetina 対応(高解像度の画像の用意と設定)が必要ですが、「 Font Awesome」は特別な対応をしなくても綺麗に見えるのでレスポンシブサイトやスマートフォンサイトにも最適です。

「Font Awesome」の使い方

使い方は2 通り。 CDN から呼び出して利用する方法と、必要ファイルをダウンロードして利用する方法があります。今回は、導入が簡単なCDN からの利用方法についてご説明したいと思います。

1. 下記を<head> タグ内に追加する。

2. 使用したいアイコンを公式サイト( http://fontawesome.io/icons/ )から選び、指定のタグをhtml に挿入する。

2. 使用したいアイコンを公式サイト( http://fontawesome.io/icons/ )から選び、指定のタグをhtml に挿入する。

↓上の一覧から使用したいアイコンをクリック! 詳細ページへ!

「Font Awesome」の注意点

使用するにあたり、読み込み速度には少し注意が必要です。「 Font Awesome」を使用するためにはWebフォントファイルを呼び出して使用する必要があります。

そのため、多少なりともロード時に負荷が掛かりますので、例えばサイト全体でハンバーガーメニュー部分でしか使用しない等、一つ、二つのアイコンのために「FontAwesome」を使用するのは少し考える必要があります。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム