Font Awesome の使い方

Font Awesome とは

Font Awesome とは、ブログなどに Web アイコンフォントを簡単に導入できるサービスです。アイコンの種類がとても豊富で、Web ページの様々な場所で活用することができます。

Font Awesomeのアイコン一覧
Font Awesomeのアイコン一覧

Web アイコンフォントとは、アイコン画像をテキストと同じように表示できるものです。Font Awesome を利用した Web アイコンフォントのメリットには以下があります。

  • 簡単に Web アイコンフォントを表示できる
  • テキストと同じようにサイズや色を変更できる
  • サイズを大きくしてもぼやけない

使用例としては、以下のような Web アイコンフォントを簡単に表示できます。

Font Awesome には無料プランと有料プランがあり、無料プランでも約 1,500 種類以上のアイコンが使用可能です。有料プランでは、年間 99 ドルを支払うことで約 5,000 種類以上のアイコンが使用可能になります。

Font Awesome を使うための準備

Font Awesome を使うためには、2つの方法があります。ひとつは、CDN を使う方法です。もうひとつは、ファイルをサーバに配置する方法です。Font Awesome を使うためには、いずれかの方法を選択して準備を行います。もしも、よく分からない場合は、CDN を使う方法をオススメします。

CDN から Font Awesome を配信する方法

CDN とは、コンテンツを配信するためのサーバからデータを提供してもらう仕組みです。CDN から Font Awesome を配信する方法は、後述するファイルをサーバに配置して配信する方法よりも簡単に行えます。

Font Awesome の CDN を使うためには以下のコードをコピーして、head 部に貼り付けます。コードの中に含まれる v.5.8.1 は、本記事を執筆時点のバージョンであり、最新バージョンは公式ページを確認してください。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
Font Awesome の CDN を使うコード

CDN から Font Awesome を配信する方法の準備としてはこれで完了です。

サーバにファイルを配置して Font Awesome を配信する方法

サーバにファイルを配置して Font Awesome を配信する方法は、公式サイトから Web アイコンフォントをダウンロードする必要があります。以下のリンクからダウンロードページにアクセスし、Free for Web のボタンをクリックしてファイルをダウンロードしてください。

Font Awesomeのダウンロード
Font Awesomeのダウンロード

ダウンロードした zip ファイルを展開すると多くのファイルが含まれていますが、利用するファイルは以下のファイルだけでも問題ありません。ただし、サーバにアップロードする場合はそれぞれのファイル名や位置関係が変わらないように注意してください。

/ fontawesome-free-5.8.1-web
  └ /css
      └ all.css
  └ /webfonts
      └ fa-brands-400.woff2
      └ fa-regular-400.woff2
      └ fa-solid-900.woff2
Font Awesome を利用するためのファイル

その後、all.css を他の CSS ファイルと同じ要領で head 部に埋め込みます。

<head>
    <!-- FontAwesomeの読み込み -->
    <link href="all.css" rel="stylesheet">
</head>
Font Awesome を利用するための CSS

Font Awesome の使い方

まずは使いたいアイコンフォントを一覧から探します。

Font Awesomeのアイコン一覧
Font Awesomeのアイコン一覧

次に使いたいアイコンをクリックします。ただし、薄いグレーで表示されているアイコンは有料版でのみ使用できるアイコンになります。

Font Awesomeのアイコンを選択
Font Awesomeのアイコンを選択

アイコンの詳細ページから <i class...></i> のコードをコピーします。コピーしたコードをブログ内に貼り付けると使用することができます。

Font Awesomeのコードをコピー
Font Awesomeのコードをコピー
<i class="fab fa-android"></i>
Font Awesome を利用するためのコード

成功すると、以下のように表示されます。大きさや色は自由に変更することができます。

アイコンの大きさを変更する

アイコンの大きさを変更するには、class の中に以下のように記述することで変更することができます。

  • fa-lg: 1.333・・・倍
  • fa-2x: 2 倍
  • fa-3x: 3 倍
  • fa-4x: 4 倍
  • fa-5x: 5 倍

以下は 4 倍の大きさにしたアイコンです。

<i class="fab fa-android fa-4x"></i>
Font Awesome を利用するためのコード

任意の大きさに調整したい場合は、スタイルシートで font-size を定義することで独自の大きさにすることができます。以下は、font-size: 100px で定義したアイコンです。

.fa-large {
    font-size: 100px;
}

アイコンの色を変更する

色の変更はスタイルシートの color で定義する必要があります。

.fa-green {
    color: #A4C639;
}

アイコンを回転させる

アイコンを回転させるには classfa-spin を追加します。

<i class="fab fa-android fa-spin"></i>

8フレームで1回転させるには classfa-pulse を追加します。

<i class="fab fa-android fa-pulse"></i>

アイコンの表示角度を変更する

アイコンの表示角度を変更するには class に以下を追加します。

  • fa-rotate-90: 90 度傾ける
  • fa-rotate-180: 180 度傾ける
  • fa-rotate-270: 270 度傾ける
<i class="fab fa-android fa-rotate-90"></i>

アイコンの表示を反転させる

アイコンの表示を反転するには class に以下を追加します。

  • fa-flip-horizontal: 水平方向に反転する
  • fa-flip-vertical: 垂直方法に反転する
<i class="fab fa-android fa-flip-vertical"></i>

アイコンを等幅で表示させる

アイコンは以下のように等幅ではありません。

Android
Mobile

しかし、classfa-fw を追加することで等幅に調整することができます。

Android
Mobile
<i class="fab fa-android fa-fw"></i>
<i class="fa fa-mobile-alt fa-fw"></i>

アイコンを線で囲む

アイコンを線で囲むには classfa-border を追加します。

<i class="fab fa-android fa-border"></i>

アイコンを重ねる

アイコンを重ねるには、親要素の classfa-stack を追加します。最初に背面のアイコンを定義し、classfa-stack-2x を追加します。次に前面のアイコンのを定義し、classfa-stack-1x を追加します。

<span class="fa-stack">
    <i class="fas fa-cloud fa-stack-2x"></i>
    <i class="fab fa-android fa-stack-1x"></i>
</span>
Category:
WEBデザイン
公開日:
更新日:
Pageviews:
133
Shares:
5
Tag:
Font Awesome
hatebu icon
hatebu