Googleマテリアルアイコン

Googleが開発しているデザインシステム”Material”のアイコンフォント。デザインを統一して使いやすくわかりやすくしようね、というもののようです。

前から気になっていたのですが、最初にFont Awesomeを導入したとき、疑似要素で使おうとすると文字化け（お豆腐）して、首をかしげつつGoogleマテリアルアイコンにしても文字化けしてしまい、”解せぬ”という感じだったのですが、色々いじくってるうちになおりました。原因は不明です（だめなやつ

解決したので使ってみるとFontAwesomeよりもGoogleマテリアルアイコンのほうがよりシンプルでキャーステキでした。語彙力をください。

アイコンの豊富さではFont Awesomeに負けてますが、それは仕方ない。

gitとかあるけど無知に拍車がかかっているのでwebフォントで使います。htmlのhead要素内に下記のコードを入れるだけ。

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

コードの追加にはCode Snippetsというプラグインを使っています。head要素やCSSの追加を個別にオンオフできるので、クラス名を変えずにデザインを変えることもできます。

CSSだけ一括で追加できるプラグインもありますが、複数のプラグインで管理するよりもひとつにまとめられるCode Snippetsの使い勝手の良さと、function.phpを直接いじってやらかす心配もないのでおすすめです。

アイコンの一覧はtopページからResources→Icons

<span class="material-icons">
done
</span>

done

お手軽。CSSを追加して色を変えるも、listの点を消してアイコンにするも自由です。やり方はFont Awesomeとあまり変わりません。

そして、かなしいことにunicodeがアイコンを選んでも表示されないので、下記リンクから目グレップ or Ctrl+fで検索してください。

あと関係ないけどおとうふTofuFont

in Low gear.