![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
Font Awesome のアイコンをSVGで使用する方法｜サイト軽量化・表示速度改善にも効果的
Font Awesome は、Web制作で定番のアイコンライブラリです。CDNで簡単に導入できる一方で、数個しかアイコンを使用していなくても大量のアイコン定義やWeb Fontsを含むCSSファイルを読み込む必要がありま […]
markleaps.com
SVGアイコンは、HTMLへ直接記述するだけでなく、CSSの疑似要素（::before / ::after）として使用することもできます。
例えば、以下のような装飾用途のアイコンを一括で表示したい場合に非常に便利です。
・PDFリンク
・外部リンクアイコン
・矢印アイコン
・リストマーカー
疑似要素でのアイコン表示は装飾用途向けです。
意味を持つアイコンは、アクセシビリティの観点からHTMLへ直接記述する方法が推奨されます。
Font Awesome からSVGコードを取得する
まずは使用したいアイコンのSVGコードを取得します。
|
1 2 3 |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path d="M208 48L96 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16l80 0 0 48-80 0c-35.3 0-64-28.7-64-64L32 64C32 28.7 60.7 0 96 0L229.5 0c17 0 33.3 6.7 45.3 18.7L397.3 141.3c12 12 18.7 28.3 18.7 45.3l0 149.5-48 0 0-128-88 0c-39.8 0-72-32.2-72-72l0-88zM348.1 160L256 67.9 256 136c0 13.3 10.7 24 24 24l68.1 0zM240 380l32 0c33.1 0 60 26.9 60 60s-26.9 60-60 60l-12 0 0 28c0 11-9 20-20 20s-20-9-20-20l0-128c0-11 9-20 20-20zm32 80c11 0 20-9 20-20s-9-20-20-20l-12 0 0 40 12 0zm96-80l32 0c28.7 0 52 23.3 52 52l0 64c0 28.7-23.3 52-52 52l-32 0c-11 0-20-9-20-20l0-128c0-11 9-20 20-20zm32 128c6.6 0 12-5.4 12-12l0-64c0-6.6-5.4-12-12-12l-12 0 0 88 12 0zm76-108c0-11 9-20 20-20l48 0c11 0 20 9 20 20s-9 20-20 20l-28 0 0 24 28 0c11 0 20 9 20 20s-9 20-20 20l-28 0 0 44c0 11-9 20-20 20s-20-9-20-20l0-128z"/> </svg> |
Font Awesome からSVGコードを取得する方法については以下の記事で紹介しています。
background-image でCSSに記述する
取得したSVGコードを、CSSの background-image にdata URI（data:image/svg+xml）形式で記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.pdf_list li::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 7px; vertical-align: -0.1em; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="%23CC3300" d="..." /></svg>'); background-repeat: no-repeat; background-size: contain; } |
※ d=”…” の中身には、取得した実際の長いSVGパスデータをそのまま記述します。
fillカラーの「#」は %23 に変換する
SVG内の fill=””（塗りつぶし色）などで色を指定する場合、カラーコードの # はURLのハッシュと見なされてしまうため、%23 に変換する必要があります。
|
1 2 3 |
#CC3300 ↓ %23CC3300 |
変換しないとSVGが正常に表示されない原因になります。
mask-image を使って色をCSS側で変更する方法（おすすめ）
アイコンが単色の場合は、background-image の代わりに mask-image を使用する方法がおすすめです。
SVG自体に色（fill）を書き込まず、CSS側の background-color でアイコンの色を指定できるようになるため、ホバー時の色変更やダークモード対応など、CSSで柔軟に色管理したい場合に便利です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.pdf_list li a::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 7px; vertical-align: -0.1em; /* ① アイコンの色をCSS側で指定 */ background-color: #333; /* ② SVGの形状でマスクをかける（古いブラウザ向けに-webkit-も併記） */ -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="..."/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="..."/></svg>'); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; mask-repeat: no-repeat; mask-size: contain; mask-position: center; } /* ホバー時にCSSだけで簡単に色を変えられる */ .pdf_list li a:hover::before { background-color: #CC3300; } |
mask-image のメリット
mask-image を使用すると、SVG側へ fill=”%23xxxxxx” を記述する必要がありません。
そのため、
- CSSだけで色変更できる
- hover時のカラー変更が簡単
- ダークモード対応しやすい
- SVGコードを使い回しやすい
といったメリットがあります。
mask-image の注意点
mask-image は、SVGの形状をマスクとして使用する仕組みのため、基本的に単色アイコン向けです。
グラデーションや複数色アイコンには向いていません。
また、古いブラウザでは -webkit-mask-image の併記が必要な場合があります。
まとめ
CSS疑似要素でSVGを使用すると、HTMLへ装飾用アイコンを追加せずに管理できるメリットがあります。
background-image と mask-image は用途に応じて使い分けるのがおすすめです。
- グラデーションや複数色、固定色のアイコン → background-image
- ホバーで色を変えたい、サイトのテーマ色と連動させたい単色アイコン → mask-image
ただし、アイコンの数があまりにも多い場合や、SVGのパスデータが長すぎる場合は、CSSのファイル容量が肥大化して可読性が落ちる原因になります。
その場合は「SVGスプライト」など別の手法との使い分けを検討してみてください。