アイコンフォントといえば『Font Awesome』ですが、
デザイン的にはGoogleマテリアルアイコンのほうが好みです。
ただ、疑似要素への使い方などは公式サイトで書いていないので調べてみました。
他のアイコンフォントは疑似要素に対してcontentプロパティで文字コード設置する方法など書いていますが、
Googleマテリアルアイコンは無いんですよね。
Googleマテリアルアイコン
Google Material Icons
Material Icons Guide
Google Material Iconsの基本的な使い方
CSSを読み込み。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
あとはHTML上でタグを使えばアイコンが表示される。
<i class="material-icons">email</i>
疑似要素で使う方法
使いたいアイコンの文字コードの確認方法。
画像の赤枠部分の下4桁「E0BE」の頭に「\」をつければOKです。
例）メールアイコンを疑似要素で指定
.test:before {
font-family: 'Material Icons';
content: "\E0BE";
}
ちなみに”email”という文字列を入れても表示されますが、
フォントが読み込まれるまでの間、”email”文字がそのまま出てしまいます。
.test:before {
font-family: 'Material Icons';
content: "email";
}
アイコン文字コード一覧
フォント読み込みまでの間、文字がそのまま表示されるのが気持ち悪いので、
githubに上がってた各文字コードになります。
