Font Awesome（フォントオーサム）とは

Font Awesome（フォントオーサム）

サイトやアプリケーション等に埋め込むだけで使えるWebアイコンフォント。
多くのWeb制作者に長く愛される定番のサイトで、サイト修正にも必要不可欠というほど利用されています。
ただしバージョンによって使用方法や使えるアイコンが異なります。また無料版と有料版もあるため要注意。

サイトへ訪問する

Font Awesome（フォントオーサム）とは

Web制作で使えるアイコンフォントとSVGアイコンのライブラリです。
文字のように扱えるアイコンを提供しており、ボタンやナビゲーション、SNSリンクなどに簡単に組み込めます。世界中のWebサイトで利用されている定番ツールで、無料版と有料版が用意されています。

主な機能・特徴

7,000種類以上のアイコン（無料版は制限）
文字と同じように扱えて、CSSでサイズや色も変更可能
回転、アニメーション（スピン、バウンド）なども簡単に設定可能
SNSの公式アイコン対応
SVGとWebフォント両対応
軽量で高速表示
外部CDNを利用でき、すぐに導入可能
無料版でも個人・商用サイトに利用可能

活用例

公式のSNSアイコンをサイトに設置
ボタンやナビゲーションの装飾に
WebサービスやアプリのUIに
サイト内の説明やインフォグラフィックを視覚的に分かりやすくしたいとき

使い方

使い方は大きく3種類
使い方①：Font Awesome kitを使用
使い方②：CDNコードを利用
使い方③：ファイルをダウンロードして埋め込む

もっと簡単で推奨される方法は、①の「Font Awesome kitを使用」方法です。
以下解説になります。

Font Awesome kitの使い方

①アカウントの作成

Font Awesome kitは、公式サイトが提供しているもので、アイコンがアップデートしても、コードを変更することなく使い続けられるので安心して使える方法です。

利用するためには、メールアドレスでのアカウント作成が必要です。
ページ上の「start」から作成可能です。
キットが作成されるので、キットの一意のコードをページのheadタグにコピーします。
コード内容はこういった内容になります。

<script src="https://kit.fontawesome.com/※アカウント固有のコード.js" crossorigin="anonymous"></script>

②アイコンフォントを探す

ページ上の「虫眼鏡アイコン」からアイコンを探します。
カテゴリーやワード検索など様々な方法で探せるのでとても効率的です。

有料のアイコンには【PRO】などの表記が追記されているので非常にわかりやすいです。

アイコンプレビューの左下には【Show Styling Tools】と【Show Animation Options】のボタンがあるのでクリックすると色や角度、サイズ、アニメーションなどを任意で変更・追加できます。

③HTMLに貼り付け

アイコンの種類やスタイルが決まったら右画面にあるHTMLタブからコードをコピーして、アイコンを使いたいHTMLの任意の場所に貼り付ければ完了です。

コピーするHTMLタグは基本的にiタグです。テキストのようにCSSで様々なスタイルを付与できます。
コード内容はこういった内容になります。

<i class="※アイコンごとのクラスや設定"></i>

cssの擬似要素を使って表示したいときは
各アイコンページの右上にあるユニコード（Unicode)を取得し利用します
※contentに指定する際はユニコードの前に「/」（バックスラッシュ）を付ける必要があります

CSSは使用イメージ

<div class="fa-icon"></div>

.fa-icon::before {
  font-family: 'Font Awesome 6 Free'; /* プランやバージョンによって変更 */
  content: '/f015'; /* アイコンのUnicode */
  font-weight: 900; /* スタイル (Solid, Regular, Light, Brandsなど)によって変更 */
}

利用規約

料金形態	無料、サブスクあり（料金プラン）
商用利用	OK
クレジット表記	不要
登録・ログイン	必須
規約の確認先	公式サイト

※掲載内容は変更される場合があります。必ず【公式サイト】で確認後、自己責任でご利用ください。