[CSS] SVGアイコンを疑似クラスで表示する方法
Font AwesomeのSVGを、疑似クラス(::before/::after)で使用できれば良いな～。色も簡単に変更できる方法をご紹介します。
一般的にFont Awesomeを使用したい場合、CDNをリンクするか、Kitを設定してUnicodeをする流れになりますが、その手間は不要です。
INDEX
Unicodeを使用した場合
contentにアイコン番号入力する一般的なパターン
例えばリンクの後ろにアイコンを表示する場合
a::after{font-family: "Font Awesome 5 Free";
content: "\f08e";
font-weight: 600;
padding-left: 6px;}Font AwasomeのSVGコードの取得
好みのアイコンを見つけたら、SVGを選択します。
疑似クラス
細かい部分はご自身で調整して下さい。
a::after{
content: "";
display: inline-block;
-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="・・・省略・・・"/></svg>');
mask-image: url('data:image/svg+xml,<svg xmlns="・・・省略・・・"/></svg>');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
/* ここで指定した色がSVGの色 */
background-color: #fff;
width: 1em;
height: 1em;
background-repeat: no-repeat;
vertical-align: -0.1em;
margin-left: 6px;
}先ほど取得した<svg xmlns=”～の長いコードを2か所にペースト
- -webkit-mask-image: url(‘data:image/svg+xml,の後
- mask-image: url(‘data:image/svg+xml,の後
アイコンの色を変えられる様にbackground-image:を使わず、mask-image:を使用します。デフォルトは黒ですが、background-color:で書き換える事が出来ます。
hover等、使いやすくなりますね。
Font Awesomeアイコンの基本編
あわせて読みたい
Font Awesomeアイコンの使い方と応用
Font Awesome の導入方法が変わっていました。Kitsが導入されました。無料版では1サイトのみで、ページビューの制限もあります。1サイト以上、無料で使いたい場合はダウ…
コメント ※ハンドルネームでお願いします