![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
Font Awesome は、Web制作で定番のアイコンライブラリです。
CDNで簡単に導入できる一方で、数個しかアイコンを使用していなくても大量のアイコン定義やWeb Fontsを含むCSSファイルを読み込む必要があります。
そのため、使用アイコン数が少ないサイトでは、必要なSVGだけを直接利用した方が軽量かつ高速になるケースもあります。
この記事では、Font Awesome のアイコンをSVGとして利用する方法を紹介します。
Font Awesome をSVGで使うメリット
Font Awesome は非常に便利ですが、CDN版やWeb Fonts版では、使用していない大量のアイコンデータまで読み込まれてしまいます。
そのため、使用アイコン数が少ない場合は、必要なSVGだけを直接使用した方が軽量になるケースがあります。
SVGとして利用する主なメリットは以下の通りです。
- Font Awesome のバージョン更新の影響を受けにくい
- 外部CDNへの依存を減らせる
- 不要なCSSやフォントファイルを読み込まずに済む
- サイト表示速度の改善につながる
Font Awesome のSVGアイコンを取得する方法
まずは Font Awesome の公式サイトで使用したいアイコンを検索します。
使用したいアイコンを開き、「SVG」タブを選択するとSVGコードを取得できます。
取得したコードをHTML（またはPHP）へ直接貼り付けることで、そのままSVGアイコンとして利用できます。
Font Awesomeでは、「Full SVG」と「SVG」の2種類が表示される場合があります。
主な違いはSVG内部の座標サイズ（viewBox）で、通常のWeb制作では、扱いやすい「SVG（512×512）」版を使用すれば問題ありません。
なお、取得したSVGコードには、以下のようなライセンス情報のコメント行が含まれている場合があります。
これは表示には不要なため、HTMLを整理したい場合は削除しても問題ありません。
|
1 |
<!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--> |
インラインSVGの基本的な使い方
インラインSVGとは、SVGコードをHTMLへ直接記述して使用する方法です。
取得したSVGコードをHTML（またはPHP）の任意の箇所に貼り付ける
|
1 2 3 4 5 6 |
<div class="search_btn"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/> </svg> <span>検索</span> </div> |
CSSでSVGアイコンを調整する
SVGアイコンはCSSでサイズや色を自由に変更できます。
|
1 2 3 4 5 6 7 |
.search_btn svg { display: inline-block; width: 1em; height: 1em; fill: #90959A; vertical-align: middle; } |
fill: currentColor; を指定すると、親要素の文字色を継承できるため、ボタンやリンクの色変更にも柔軟に対応できます。
SVGスプライト（Inline SVG Sprite）で一括管理する方法
SVGアイコン数が増える場合は、SVGスプライト化すると管理しやすくなります。
SVGスプライトとは、複数のSVGアイコンを <symbol>
この方法には以下のメリットがあります。
- SVGコードの重複を防げる
- HTMLを簡潔にできる
- 外部リクエストを増やさずに済む
- アイコン管理を一元化できる
使用したい全てのSVGアイコンを <symbol><svg>
これを共通テンプレートの <body>
WordPressの場合は、header.php や共通テンプレートへ設置するケースが一般的です。
|
1 2 3 4 5 6 7 8 9 |
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="icon-search" viewBox="0 0 512 512"> <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/> </symbol> <symbol id="icon-angle-right" viewBox="0 0 512 512"> <path d="M247.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L179.2 256 41.9 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/> </symbol> </svg> |
SVGスプライトの呼び出し方法
定義したSVGアイコンを、HTMLファイルやPHPファイルの任意の箇所で <use>
|
1 2 3 |
<svg class="svg-icon"> <use href="#icon-search"></use> </svg> |
CSSを共通化しておくと、全アイコンを一括管理できます。
|
1 2 3 4 5 6 7 |
.svg-icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: middle; } |
装飾目的のSVGアイコンには aria-hidden=”true” の付与を推奨
装飾のみを目的としたSVGアイコンは、スクリーンリーダーで読み上げる必要がないため、aria-hidden=”true” を付与するのが一般的です。
例えば、検索ボタン内にある虫眼鏡アイコンのように、テキストと意味が重複している装飾アイコンに適しています。
■ SVGスプライトの場合
|
1 2 3 |
<svg class="svg-icon" aria-hidden="true"> <use href="#icon-search"></use> </svg> |
■ インラインSVGの場合
|
1 2 3 |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true"> <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/> </svg> |
まとめ
Font Awesome のSVG化は、不要なCSSやWeb Fontsの読み込みを削減できるため、サイト軽量化や表示速度改善に効果的です。
特に、
- 数個しかアイコンを使用していない
- PageSpeed Insights の改善につながる可能性がある
- CDN依存を減らしたい
- SVGをCSSで柔軟に制御したい
といった場合におすすめです。
アイコン数が少ない場合は「インラインSVG」、複数管理する場合は「SVGスプライト」を使い分けることで、保守性とパフォーマンスを両立できます。