Google推奨のGoogle製マテリアルアイコンを使う

Google推奨のGoogle製マテリアルアイコンを使う

HTMLでアイコンを使用する場合、WPでもデフォルトで使えるFont Awesomeで実装するのが一般的だと思いますが、マテリアルデザインやフラットデザインのサイトを構築する場合、 material.ioで提供されているアイコンを使ってみるのはいかがでしょうか?

material.ioは、Googleが提唱するUXデザインの概念「マテリアルデザイン」についての情報を1つにまとめられたサイトです。こちらのサイトでは、マテリアルデザインの仕方やUIを手軽に作成するツールまで揃ってます。

そのツールの一環として、今回紹介するマテリアルアイコンが提供されています。

使用方法

Webフォントの読み込み

下記のコードをHTMLのhead内に追記することでアイコンが使用できるようになります。

iconの設定

アイコンは、<i class="material-icons">〇〇</i>の〇〇を特定の単語にすることでアイコンを設定できます。

例:

アイコンは、一覧ページより探せます。

その他装飾

公式ドキュメントでは、大きさや色の変え方なども紹介されています 。

まとめ

今回紹介したmaterial.ioのアイコンは、Font Awesome程ではありませんが、一通りそろっており一般的なサイトであれば、十分そろっていると思います。マテリアルデザインやフラットデザインを構築するときやFont Awesomeに少し飽きてしまったときに使ってみてはいかかでしょうか?