HTML/CSS

Google Material Iconsの使い方と疑似要素で使う方法（IE11対応）

Googleが提供しているアイコンフォトで、Google Material Iconsというものがあります。Fontawesomeが登録制となってしまったので、登録とかの手間が面倒だという方は、ちょっと数が少なめですがこちらを使うのもよいかもしれません。

Google Material Iconsの使い方

とりあえず以下を読み込みます。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

次にGoogle Material Iconsにアクセスします。
例えば「＞」のアイコンを使いたい場合、以下画像のように検索窓に「arrow」と入れて絞り込み、右画面に出てきた「＞」をクリックします。

左下に表示される「Selected Icon」をクリック。

ニューっと下図のような画面になるので、コードをコピー。

<i class="material-icons">arrow_forward_ios</i>

コピーしたコードをペーストして終わりです。

疑似要素で使用する場合

例えば複数のボタンに同じアイコンを設定する場合、全部に入れてると面倒くさいのとソースが汚くなるので、疑似要素で入れたくなります。

そんな場合は、CSSでbeforeかafterに以下を設定します。

&::before{
font-family: 'Material Icons';
content: "arrow_right";
}

contentには以下画像の赤枠のように、入れたいアイコンの名前を入れます。

1つ問題はアイコンが表示されるまで「arrow_right」という文字列が表示される点ですが、一瞬なのでそんなに気にならないかなと･･･。

気になるなら文字コードで指定する方がよいです。

参考：GoogleMaterialIcons文字コード対照（github）

疑似要素設定時にIE11で表示されない問題

疑似要素で設定すると、IE11で見れなくなってしまいました。

解決方法をググってみると、

文字コード参考サイトのIssueで海外の方が解決方法を記載されていました。

body {
    text-rendering: optimizeLegibility;
    font-kerning: normal;               
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "kern", "liga", "clig", "calt";
}

引用元：https://github.com/google/material-design-icons/issues/536

RECOMMENDこちらの記事も人気です。