GoogleのMaterial iconsには、マテリアルデザインのアイコンが多数あります。
Material iconsのアイコンは以前、SVG、PNG配布していて利用できたのですが、アイコンフォントも利用できるようになったようです。
で、Material iconsのアイコンフォントの使い方を調べつつ使ってみたので、今回はその利用方法を紹介したいと思います。
目次
Material iconsとは
Material iconsは、Googleが運営しているマテリアルデザインに対応したアイコンパックを配布しているサイトです。
全15カテゴリ、750種類以上のマテリアルアイコンをSVGや、PNGでダウンロードしたり、アイコンフォントとして利用できます。
こんな感じのアイコンです。
これらのアイコンフォントを、CC BY 4.0ライセンスで利用することができます。
対応ブラウザは、以下のようになっています。
ブラウザ | 対応バージョン |
---|---|
Google Chrome | 11~ |
Mozilla Firefox | 3.5~ |
Apple Safari | 5~ |
Microsoft IE | 10~ |
Opera | 15~ |
Apple MobileSafari | iOS 4.2~ |
Android Browser | 3.0~ |
Material iconsのアイコンフォントの使い方
以下で、Material iconsのアイコンフォントの使い方を紹介します。
詳しい方法は、以下に記載してあります。
Material icons guide – Google design
主な手順
アイコンフォントを利用するには、主に以下の手順が必要です。
- Material iconsフォントのCSSファイルを呼び出す
- CSSファイルに利用をするためのコードを書く(コピペ)
- アイコンフォントを表示したいところにHTMLを書く(コピペ)
Material iconsのアイコンフォント用CSSファイルは、WEB上から手軽に呼び出すことができるので、かなり設定は簡単です。
Material iconsフォントのCSSファイルを呼び出す
Material icons用のCSSファイルは、Google Web Fontsにあるものを呼び出すだけで良いので簡単です。
<head></head>内に以下のように書くだけでOKです。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
CSSファイルに利用をするためのコードを書く
Google Web Fontsから、アイコンフォントのCSSファイルを呼び出している場合は、手持ちのCSSファイルに以下のように書くだけでOKです。(Wordpressならstyle.cssに追記でOKです。)
/* Material iconsを利用する */ .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* 推奨サイズ */ display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; /* WebKitブラウザサポート */ -webkit-font-smoothing: antialiased; /* Chrome、Safariサポート */ text-rendering: optimizeLegibility; /* Firefoxサポート */ -moz-osx-font-smoothing: grayscale; /* IEサポート */ font-feature-settings: 'liga'; }
あと、拡張クラスを追加してクラスを組み合わせて、サイズ指定したり、色指定をしたりする方法も提案されています。
/* アイコンサイズ */ .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.md-36 { font-size: 36px; } .material-icons.md-48 { font-size: 48px; } /* 背景が明るいとき用のアイコン色 */ .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } /* 背景が暗いとき用のアイコン色 */ .material-icons.md-light { color: rgba(255, 255, 255, 1); } .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
アイコンフォントを表示したいところにHTMLを書く
あとは、Material iconsに移動し、利用したいアイコンを探します。
使用したいアイコンが見つかったら、クリックすると、画面下にHTMLタグが表示されるのでタグをコピーします。
アイコンを利用するためのタグは、以下の2種類が表示されます。
<!– For modern browsers. –>と書かれた方は、モダンブラウザのみに対応できれば良い時に利用します。こちらは、要素内に「face」のように文字でアイコン情報が記載されています。なので、後からソースコードを見ても分かりやすいです。
<!– For IE9 or below. –>と書かれた方は、IE9未満のブラウザにも対応させたいときに利用します。こちらは、要素内に「」のようなコードが記載されるだけなので、後からソースを見返しても、どんなアイコンなのかはわかりにくくなります。
で、実際に以下のように使ってみると
<i class="material-icons">face</i> <i class="material-icons">stay_current_portrait</i> <i class="material-icons">directions_transit</i>
以下のように表示されます。
face stay_current_portrait directions_transit
うまく表示されない場合は、ブラウザをリロードしてみてください。
クラスを組み合わせて使用する
先程、CSSを記入した時に、以下のような設定を行いました。
/* アイコンサイズ */ .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.md-36 { font-size: 36px; } .material-icons.md-48 { font-size: 48px; } /* 背景が明るいとき用のアイコン色 */ .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } /* 背景が暗いとき用のアイコン色 */ .material-icons.md-light { color: rgba(255, 255, 255, 1); } .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
これを組み合わせて利用するには、以下のように書きます。
サイズ変更
face 18px
face
face 24px
face
face 36px
face
face 48px
face
face 18px <i class="material-icons md-18">face</i> face 24px <i class="material-icons md-24">face</i> face 36px <i class="material-icons md-36">face</i> face 48px <i class="material-icons md-48">face</i>
文字色指定
face Normal
face
face Disabled
face
face Normal(背景暗色用)
face
face Disabled(背景暗色用)
face
face Normal <i class="material-icons md-dark">face</i> face Disabled <i class="material-icons md-dark md-inactive">face</i> face Normal(背景暗色用) <i class="material-icons md-light">face</i> face Disabled(背景暗色用) <i class="material-icons md-light md-inactive">face</i>
上記のように、いろいろなクラスの設定を組み合わせで利用してもOKです。
まとめ
こんな感じでMaterial iconsのGoogleアイコンフォントは、結構手軽に利用できました。
Android 5.0(Lollipop)よりマテリアルデザインが本格的に採用されました。「これを機にサイトもマテリアルデザイン化」したいという場合には良いかもしれません。
Googleのマテリアルデザインのガイドラインは以下。