Font Awesome 完全解説 — Leaflet / easyButton との連携まで

Font Awesome とは何か

Font Awesome（フォントオーサム）は、Web で最も広く使われているアイコンフォントライブラリである。アイコンを画像（PNG / SVG ファイル）として管理するのではなく、 フォントとして文字コードに割り当てる仕組みを採用しており、 CSS の font-size や color だけでサイズ・色を自在に変更できる。

2012年に Dave Gandy が Twitter Bootstrap 向けに公開し、現在は Fonticons 社が開発・管理している。無償で使える Free エディションと、商用拡張の Pro エディションがある。

なぜアイコンフォントが便利なのか

比較項目	アイコンフォント（Font Awesome）	PNG / SVG ファイル管理
サイズ変更	CSS 1行（`font-size`）	別ファイルを用意、または transform
色変更	CSS の `color` プロパティのみ	SVG 内部の fill を書き換え
解像度	ベクターなので Retina でも滲まない	PNG は高解像度用ファイルが別途必要
管理コスト	CDN 1行で数千アイコン利用可能	アイコンごとにファイルを管理

バージョン体系

2024年現在の最新安定版は 6.x 系（6.5 以降）。クラス名が fas / far / fab（v4/5系）から fa-solid / fa-regular / fa-brands に変更された（v5 以降）。後方互換シムも公式提供されているが、新規プロジェクトでは v6 スタイルを推奨する。

導入方法

CDN で読み込む（最も手軽）

以下の <link> タグを <head> 内に追記するだけで、 Font Awesome 6 Free の全アイコンが利用できる。

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

Kit を使う方法（fontawesome.com で発行するスクリプトタグ）もあるが、個人プロジェクト・ブログでは CDN が最も手軽である。

npm でインストールする

# Solid / Regular / Brands をまとめてインストール
npm install @fortawesome/fontawesome-free

インストール後は CSS をビルドチェーンでインポートする。

/* main.css や app.js の冒頭 */
import '@fortawesome/fontawesome-free/css/all.min.css';

基本的な使い方

アイコンを表示する

 タグ（または ）にスタイルクラスとアイコン名クラスを付与するだけである。

<!-- Solid スタイル -->
<i class="fa-solid fa-house"></i>

<!-- Regular スタイル（輪郭のみ）-->
<i class="fa-regular fa-star"></i>

<!-- Brands（ロゴ系）-->
<i class="fa-brands fa-github"></i>

アイコンサンプル

Font Awesome アイコン一覧

fa-house

fa-magnifying-glass

fa-location-dot

fa-image

fa-user

fa-person-walking

fa-rotate-left

fa-gear

fa-star (reg)

fa-triangle-exclamation

fa-expand

fa-pen

fa-circle-info

fa-xmark

fa-check

サイズを変更する

fa-xs〜fa-2xlの組み込みサイズクラスか、 CSS の font-size で指定する。

fa-xs fa-sm base fa-lg fa-xl fa-2xl

<i class="fa-solid fa-location-dot fa-xs"></i>
<i class="fa-solid fa-location-dot fa-xl"></i>
<!-- または CSS で直接指定 -->
<i class="fa-solid fa-location-dot" style="font-size:48px"></i>

色を変更する

アイコンは通常のテキストと同じく、color プロパティで着色できる。親要素の色を継承するので、ボタン内に配置すればボタンの色が自動で適用される。

<i class="fa-solid fa-star" style="color: #3b6ef6"></i>
<i class="fa-solid fa-star" style="color: #e84393"></i>

アニメーション

fa-spin・fa-pulse・fa-bounce 等のクラスで CSS アニメーションを簡単に追加できる。

<i class="fa-solid fa-spinner fa-spin"></i>   <!-- 回転 -->
<i class="fa-solid fa-bell fa-shake"></i>    <!-- 振動 -->
<i class="fa-solid fa-heart fa-beat"></i>    <!-- 鼓動 -->
<i class="fa-solid fa-up-down fa-bounce"></i> <!-- バウンス -->

アイコンを重ねる（fa-stack）

fa-stack コンテナを使うと、2 つのアイコンを重ね合わせてバッジ風の表現が作れる。

<span class="fa-stack fa-lg">
  <i class="fa-solid fa-circle fa-stack-2x" style="color:#3b6ef6"></i>
  <i class="fa-solid fa-map-pin fa-stack-1x fa-inverse"></i>
</span>

マップピン

検索

ルート

輪郭+ピン

Leaflet との関係

Leaflet は軽量なオープンソースの JavaScript 地図ライブラリである。デフォルトで提供される UI コントロール（ズームボタンなど）は独自の PNG 画像を使用するが、 Font Awesome を組み合わせることで、地図上のあらゆる要素をベクターアイコンに置き換えられる。

主な用途

用途	概要
カスタムマーカー	`L.divIcon` で HTML マーカーを作成し、`<i>` タグを埋め込む
ポップアップ内のアイコン	`bindPopup` の HTML 文字列に `<i>` を含める
カスタムコントロールボタン	`L.Control` を継承したボタンに `<i>` を配置
easyButton のアイコン	後述する easy-button.js と組み合わせて使う（最も一般的）

カスタムマーカーの実装例

L.divIcon を使うと、任意の HTML をマーカーとして地図上に配置できる。

// Font Awesome アイコンをマーカーとして使う
const faIcon = L.divIcon({
  html: '<i class="fa-solid fa-location-dot" style="font-size:32px;color:#e84393"></i>',
  iconSize:   [32, 32],
  iconAnchor: [16, 32],  // アイコン下端をピン位置に合わせる
  className:  ''           // デフォルトの白背景を除去
});

L.marker([35.6812, 139.7671], { icon: faIcon })
  .addTo(map)
  .bindPopup('東京駅');

className: '' を指定しないと Leaflet がデフォルトスタイル（白い背景・枠線）を付与する。 Font Awesome アイコンのみを表示したい場合は必ず空文字列を設定すること。

easy-button.js（easyButton）との関係

easy-button.js は Leaflet 用の軽量プラグインで、地図コントロール（左上に並ぶズームボタンと同じ領域）にカスタムボタンをワンライナーで追加できる。

easyButton は「ボタンの中に何を表示するか」を HTML 文字列で受け取るため、 Font Awesome の  タグをそのまま渡すだけでアイコンボタンが完成する。これが「easyButton × Font Awesome」の連携の核心である。

導入（CDN）

<!-- Leaflet CSS / JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<!-- Font Awesome 6 -->
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<!-- easy-button -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>

基本的な使い方

// 現在地ボタンを追加する最小構成
L.easyButton(
  'fa-solid fa-location-crosshairs',  // ① クラス文字列（または HTML 文字列）
  function(btn, map) {              // ② クリック時のコールバック
    map.locate({ setView: true, maxZoom: 16 });
  },
  '現在地に移動'                    // ③ ツールチップ（title 属性）
).addTo(map);

第1引数はクラス文字列（'fa-solid fa-location-crosshairs'）でも完全な HTML 文字列（''）でも動作する。 v2 系では両者を自動判定する。

状態切り替えボタン（ステートボタン）

L.easyButton に複数のステートを渡すと、クリックのたびにアイコンやラベルが切り替わる トグルボタンを実現できる。例えば「レイヤーの表示 / 非表示」の切り替えに最適である。

const toggleBtn = L.easyButton({
  states: [
    {
      stateName: 'show-layer',
      icon:      'fa-solid fa-eye',
      title:     'レイヤーを非表示',
      onClick(btn, map) {
        overlay.remove();          // レイヤーを外す
        btn.state('hide-layer'); // 次の状態へ
      }
    },
    {
      stateName: 'hide-layer',
      icon:      'fa-solid fa-eye-slash',
      title:     'レイヤーを表示',
      onClick(btn, map) {
        overlay.addTo(map);
        btn.state('show-layer');
      }
    }
  ]
}).addTo(map);

ボタンをグループ化する（easyBar）

複数のボタンを L.easyBar でまとめると、 Leaflet 標準のズームコントロールと同じ見た目のボタングループになる。

const bar = L.easyBar([
  L.easyButton('fa-solid fa-magnifying-glass-plus',  zoomIn),
  L.easyButton('fa-solid fa-magnifying-glass-minus', zoomOut),
  L.easyButton('fa-solid fa-house',                   goHome),
]).addTo(map);

地図コントロールのイメージ

← easyBar でボタンをグループ化したイメージ

3ライブラリの関係まとめ

3つのライブラリの役割分担を整理すると以下のようになる。

ライブラリ	役割	Font Awesome との関係
Font Awesome	アイコンをフォントとして提供する基盤	—（提供側）
Leaflet	地図の描画・操作・イベント管理	`L.divIcon` の html にアイコンを埋め込む
easy-button.js	Leaflet コントロール領域にボタンを追加	第1引数にクラス名を渡すだけでアイコンボタン化

Font Awesome は「アイコン素材庫」、Leaflet は「地図エンジン」、easyButton は「地図エンジン用ボタンフレーム」という位置付けである。 Font Awesome 単体では地図機能は持たず、easyButton 単体では Leaflet なしに動作しない。 3者の組み合わせで初めて「デザインされた地図コントロール」が実現する。

よくあるトラブルと対処法

症状	原因	対処
アイコンが□（豆腐）で表示される	フォントファイルの読み込み失敗、またはクラス名の誤り	CDN の URL・クラス名（`fa-solid` / `fa-regular`等）を再確認
easyButton でアイコンが表示されない	Font Awesome の CSS が easyButton の JS より後に読み込まれている	Font Awesome の `<link>` を先に記述する
`L.divIcon` に白背景が残る	Leaflet のデフォルトスタイルが適用されている	`className: ''` を指定して既定スタイルを除去する
v4 系のクラス名（`fas`）が動かない	v6 からクラス名が変更された	`fa-solid` / `fa-regular` / `fa-brands` に書き換える
Pro アイコンが表示されない	Free エディションには含まれないアイコンを使っている	fontawesome.com で Free か Pro かを確認する

Font Awesome は fontawesome.com にて全アイコンを検索できる。 easy-button.js は GitHub（CliffCloud/Leaflet.EasyButton）で公開されている。

晴歩雨描：ブログ

Font Awesome— Leaflet / easyButton 連携まで —

Font Awesome とは何か

なぜアイコンフォントが便利なのか

バージョン体系

導入方法

CDN で読み込む（最も手軽）

npm でインストールする

基本的な使い方

アイコンを表示する

アイコンサンプル

サイズを変更する

色を変更する

アニメーション

アイコンを重ねる（fa-stack）

Leaflet との関係

主な用途

カスタムマーカーの実装例

easy-button.js（easyButton）との関係

導入（CDN）

基本的な使い方

状態切り替えボタン（ステートボタン）

ボタンをグループ化する（easyBar）

地図コントロールのイメージ

3ライブラリの関係まとめ

よくあるトラブルと対処法

Font Awesome
— Leaflet / easyButton 連携まで —