SVGアイコンをCSSの疑似要素に使う

PageSpeed Insights が「レンダリングを妨げるリソース」なんて言うもんだから、FontAwsome の all.css を読み込まなくて済むようにしています。具体的には、SVGアイコンをテーマのHtmlに埋め込んでしまいました。

このため、箇条書前部分のアイコンなどで使う場合も、CSS内にも埋め込みする必要があります。今回は、その方法を紹介します。

CSS記述

埋め込むSVGは、この書式でできます。
     url('data:image/svg+xml;文字コード,SVG')      

埋め込み先のCSSは、content, background-image
home アイコンを埋め込む場合のサンプルはこちらです。

.sample a:before{
  content: url('data:image/svg+xml;utf-8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>' );
}

参考サイトは、こちらです。

使用上の注意事項

サイズを変える場合は、background-image か mask にする

疑似要素に FontAwesome のアイコンとして指定する場合は、こうでした。

.list li:before {
  font-family: "Font Awesome 5 Free"; // FontAwesome をFont指定
  content: "\f138";	//　font の unicode
  position: absolute;
  font-size: 16px;  left : 0.5em; 	//左端からのアイコンまで
  color: #4abdac; 	//アイコン色
}

この場合だと FontSize で、簡単にサイズ変更できますが、SVGで埋め込んだ場合はできません。 SVGを埋め込む際は、background-image で貼り付け、width/height で変えます。

.list li:before{
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url('SVG');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

参考サイトはこちら

色を変える場合の対応 2021/03/10 追記

pathタグ内の、fill="currentColor" のところに、色を指定できます。 コードで入れる場合は、"#xxx" でなくて、 "%23xxx" です。 Chromeディベロッパーツールでの調整をしやすくするには、maskにしてしまう。SVGアイコンは、-webkit-mask-imageに入れるようにすると、background-color で色調整できます

引用、囲み、箇条書のマーカーにSVGアイコンを使うときに使ってますので、次の記事も参考にしてください。