Googleが開発しているデザインシステム"Material"のアイコンフォント。デザインを統一して使いやすくわかりやすくしようね、というもののようです。
前から気になっていたのですが、最初にFont Awesomeを導入したとき、疑似要素で使おうとすると文字化け(お豆腐)して、首をかしげつつGoogleマテリアルアイコンにしても文字化けしてしまい、"解せぬ"という感じだったのですが、色々いじくってるうちになおりました。原因は不明です(だめなやつ
解決したので使ってみるとFontAwesomeよりもGoogleマテリアルアイコンのほうがよりシンプルでキャーステキでした。語彙力をください。
アイコンの豊富さではFont Awesomeに負けてますが、それは仕方ない。
Googleマテリアルアイコンの導入方法
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>
お手軽。CSSを追加して色を変えるも、listの点を消してアイコンにするも自由です。やり方はFont Awesomeとあまり変わりません。
そして、かなしいことにunicodeがアイコンを選んでも表示されないので、下記リンクから目グレップ or Ctrl+fで検索してください。
material-design-icons/codepoints at master · google/material-design-icons · GitHub
あと関係ないけどおとうふTofuFont