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

タイトル通り、cssの疑似要素でアイコンを表示したい時に、background-imageで画像表示するのもイマドキじゃないかなぁと思って調べたら、ちゃんとやり方があった。 CSSで文字コードを指定する XXXXX:before { content:'\E89E'; font-family: "Material Icons"; } こうすればよい。 contentには文字コードを入力する。 文字コードの調べ方(旧バージョン) 表示したいアイコンの文字コードはすぐ分かるので、”&#x”を”\”にしてcontentに入れる。以上。 文字コードの調べ方(2018年版) Material Design ツールキットが一斉更新された際に文字コード表示が無くなって困っていたが、 ここのコードそのまま入れても大丈夫。 XXXXX:before { content:'3d_rotation'; font-

[sutetuki]

“Googleマテリアルアイコン”