googleマテリアルアイコンをcssのbeforeやafter(疑似要素)で表示する方法

1週間以内
materialicons

タイトル通り、cssの疑似要素でアイコンを表示したい時に、background-imageで画像表示するのもイマドキじゃないかなぁと思って調べたら、ちゃんとやり方があった。

CSS

XXXXX:before {
	content:'\E89E';
	font-family: "Material Icons";
	}

こうすればよい。
contentには文字コードを入力する。

materialicons_002

表示したいアイコンの文字コードはすぐ分かるので、”&#x”を”\”にしてcontentに入れる。以上。

ダメな例

XXXXX:before {
	content:'<i class="material-icons">open_in_new</i>';
	}

contentにhtmlは指定できない。

参考にした情報
Show icon with CSS :after :before · Issue #150 · google/material-design-icons · GitHub

ちなみにfont awesome使ってる場合のやり方
fontawesomeのアイコンをcssの:before/:afterで挿入する – Qiita

コメント

コメントをどうぞ(承認後に反映されます)




コメント