SVGアイコンをCSS疑似要素で配置する方法｜IE11にも対応

最近はfontawesomeを読み込まないWordpressテーマも増えてきました。

いくつか理由はあると思います。

ファイルサイズが大きい
すべてのアイコンを使わない
iconMoonを使っている

一番の理由はfontawesomeのファイルサイズが大きく、読み込む時間が無駄だからだと思います。

ちょっとしたポイントでiconフォントを使いたい時に、fontawesomeを追加で読み込むのはやりたくない、かといってiconMoonでアイコンを用意するのも大変。

という時に、SVGアイコンを使う方法があります。

しかし、SVGアイコンは疑似要素で使えないというのが通例だったのですが、最近使えることを知りました。

とても便利だと思ったので使い方をまとめておきます。

この記事で分かること

SVGファイルをダウンロード
SVGファイルをCSSで読み込めるように変換
CSSに疑似要素として追加する
まとめ

SVGファイルをダウンロード

まず、SVGファイルを入手しましょう。

入手先は、fontawesomeでもGoogle fontsでもどこでもよいですが、fontawesomeの場合で説明します。

fontawesomeのサイトにアクセスします。

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free...

アイコンを検索して、SVGファイルをダウンロードします。

SVGファイルをCSSで読み込めるように変換

URL-encoder for SVGにアクセスします。

URL-encoder for SVG

Insert SVGにSVGファイルのテキストをコピペします。


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#1176d4"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M288 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h50.7L169.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L384 141.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H288zM80 64C35.8 64 0 99.8 0 144V400c0 44.2 35.8 80 80 80H336c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v80c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16h80c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>

Ready for CSSに出てきた結果をコピーします。

このCSSはIE11にも対応しています。

background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%231176d4'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M288 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h50.7L169.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L384 141.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H288zM80 64C35.8 64 0 99.8 0 144V400c0 44.2 35.8 80 80 80H336c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v80c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16h80c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");

CSSに疑似要素として追加する

疑似要素の部分に先ほどのReady for CSSのコードを貼り付けます。

background-image以外の部分は必要に応じて調整してください。

a:after{
	margin: 0 3px 0 3px;
	display: inline-block;
	width: 1rem;
	height: 1rem;
	content:"";
	background-position:0px 1px;
	background-repeat:no-repeat;
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%231176d4'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M288 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h50.7L169.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L384 141.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H288zM80 64C35.8 64 0 99.8 0 144V400c0 44.2 35.8 80 80 80H336c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v80c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16h80c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");
}