Googleは、ウェッブサイト向けアイコンフォントを提供しています。Googleのアイコンフォントは、軽量で導入も簡単、手軽に使えます。
[post_ads]
Google マテリアル アイコンフォントの特徴
アイコンフォントは、手軽に利用できるだけでなく、効率性も高く、見た感じのイメージの向上にも繋がる利点を提供します。
- 900以上のアイコンが1つの小さなファイルに格納
- Google ウェッブフォントサーバー、またはセルフホストから提供
- 全ての現行モダンブラウザーをサポート
- CSSを使用して、色、サイズ、位置を設定可能
- ベクターベース：Ratinaディスプレイから低DPIのディスプレイのどのスケールでも良く見える
アイコンフォントは、最小のwoff2フォーマットで42KB、スタンダードwoffフォーマットで56KBと軽量です。
Google ウェブフォントを使用した導入手順
以下の1行のHTMLコードを、<head>タグ内に設置するだけです。
[<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />]
備考：
Bloggerのテンプレートに上記コードを貼り付けて、そのまま保存すると</link>がないためエラーとなります。その場合は、</link>を行の最後に追加して保存して下さい。
Bloggerのテンプレートに上記コードを貼り付けて、そのまま保存すると</link>がないためエラーとなります。その場合は、</link>を行の最後に追加して保存して下さい。
HTMLでのアイコンの使用方法
Google アイコンフォントは、Font Awesomeと同様にインライン エレメント（<i>タグ）を使用して記事内に設置します。記事内でアイコンフォントを加える場合は、ブログの編集モードをHTMLにして、アイコンフォントを加える場所に入力します。
アイコンの表示方法と例
アイコンの表示例とソースコードです。android
<i class="material-icons">android</i><br />
テキストの名前をシンプルにアイコンにレンダリング（描写）する"ligatures"と呼ばれるタイポグラフィ機能を使用しています。テキストからアイコンへの変換はブラウザーが自動的に行います。（何らかの理由で表示されない場合、テキストが表示されることに加えて、使い勝手も良いと思います。）ligturesをサポートするブラウザーとバージョンのリストです。
| ブラウザー | ligaturesサポートバージョン |
| Google Chrome | 11 |
| Mozilla Firefox | 3.5 |
| Apple Safari | 5 |
| Microsoft IE | 10 |
| Opera | 15 |
| Apple MobileSafari | iOS 4.2 |
| Android Browser | 3.0 |
アイコンのサイズと色の表示例
android android android android
<i class="material-icons">android</i>
<i class="material-icons" style="font-size: 36px;">android</i>
<i class="material-icons" style="color: green; font-size: 48px;">android</i>
<i class="material-icons" style="color: red; font-size: 60px;">android</i>
<i class="material-icons" style="font-size: 36px;">android</i>
<i class="material-icons" style="color: green; font-size: 48px;">android</i>
<i class="material-icons" style="color: red; font-size: 60px;">android</i>
サイズ
Material design icons guideline に準拠しているため、アイコンフォントのサイズはどの大きさにも対応可能ですが、Googleは12, 24, 36, または48pxで表示することを推奨しています。デフォルトは、24pxです。以下はスタンダードマテリアルデザインのサイズガイドラインの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; }
アイコンフォントは、24pxで最も見栄えが良くなるようにできています。異なるサイズでアイコンを表示する場合は、上のCSSを使用すると役立ちます。.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
例：
android
<i class="material-icons md-36">android</i>
色
アイコンフォントは、手軽にどの色にもスタイリングできます。Material design icons guideline に準拠するために、Googleはアクティブアイコンを、明るい背景で黒の透明性(opacity)54%、暗い背景では白の透明性100%で表示することを推奨しています。
アイコンが無効、またはインアクティブの時は、明るい背景で黒26%、暗い背景で白30%を推奨しています。
以下は、上記推奨スタイルのCSSです。
.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); }
通常（アクティブ）の表示例
android
<i class="material-icons md-dark">android</i>
無効（インアクティブ）の表示例
android
<i class="material-icons md-dark md-inactive">android</i>
カスタムアイコンカラーの設定
カスタムアイコンカラーを設定する場合は、CSSにお好みの色を記載します。
.material-icons.orange600 { color: #FB8C00; }
そして、クラスを指定して表示します。
android
<i class="material-icons orange600">android</i>
アイコンのライブラリー
コード名とコードポイントは、マテリアルアイコンライブラリーにリスト表示されています。
コメント