日々

Googleマテリアルアイコン

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

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

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

Homepage – Material Design

アイコンの豊富さでは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

Icons – Material Design

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


done

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

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

material-design-icons/codepoints at master · google/material-design-icons · GitHub

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

Tagged , ,

About 7

名前すらないひよこ。最近 Xiaomi 製品が好き。Mi Air 12.5を買ってキャッキャウフフしてます。離婚調停真っ最中。
View all posts by 7 →

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です