ウェブサイトデザインをやっていく中で、ほぼ必ずと言っても過言ではないくらい必要になる作業が、アイコンを作る作業だと思います。
特にスマホサイトなんかはボタンを文字で表現するよりアイコンで表示したりするので、けっこう重要。
ただ、それらを1個1個作っていくのは作業効率も上がらず、作業としても結構面倒・・・。
フリーの素材サイトとかから拝借したりもするわけですが、そうなるとデザインの統一感が確保できなかったり、欲しいデザインがなかったり・・・。
そんな悩みを解消できるかもしれない一つの手段として、「ウェブフォントアイコン」を利用するというものがあります。
今回は、Googleさんが提供している「Material icons」の使い方を解説します。
Material icons
https://design.google.com/icons/ （英語）
「Material icons」とは、Googleさんが展開するウェブフォントアイコンの名称で、Googleさんが主導する「マテリアルデザイン」の理念に基づいたデザインとなっているようです。
ウェブフォントとして利用するほか、PNG形式やSVG形式のダウンロードも可能。
・マテリアルデザインにおけるアイコンデザイン
https://material.google.com/style/icons.html#icons-system-icons （英語）
導入手順
「Material icons」を利用する方法は大きく分けて2つの方法があります。
2つ方法を紹介しますが、どちらか一方だけでOKです。
「Google Web Fonts」から呼び出す手順
STEP:1 CSSを呼び出す
Googleさんがあらかじめ用意してくれているCSSをhead要素内で呼び出すだけです。
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel="stylesheet">これだけです。
「STEP1」と書いておきながら、2はないですｗ
ただし！
上記で呼び出したCSSには【woff2】のフォントしか指定されていないのですが、主にAndroid端末で、woff形式やwoff2形式のフォントが表示されない問題があるため、一部の環境では表示されません。
なので、次に紹介する「自分のサーバーにアップロード」する手順をオススメします。
フォントファイルを自分のサーバーにアップロードして呼び出す手順
上記にも書いたwoff形式やwoff2形式のフォントが表示されない問題があるので、弊社での導入に際しては、以下で説明する予めフォントファイルをサーバーにアップする方法を採用しています。
STEP:1 フォントファイルをサーバーにアップロード
フォントファイルは以下にあるので、ここからダウンロードします。
https://github.com/google/material-design-icons/tree/master/iconfont
- MaterialIcons-Regular.ttf
- MaterialIcons-Regular.woff
- MaterialIcons-Regular.woff2
上記3種をもらっておきましょう。
これらをサイトを運用するサーバーにアップしてください。
※弊社ではわかりやすく管理するために「css」ディレクトリと並列で「font」というディレクトリを作ってアップしています。
（この後の説明上のURL指定もそれに準じています）
STEP:2 CSSを記述
以下のCSSを記述します。
基本的には公式のCSSと同じですが、フォントが表示されない問題対策として、一部記述を変えてあります。
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(../font/MaterialIcons-Regular.woff2) format('woff2'), url(../font/MaterialIcons-Regular.woff) format('woff'), url(../font/MaterialIcons-Regular.ttf) format('truetype') ;}.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; vertical-align: middle; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;}上記のようにアップした3種のフォントをカンマ区切りで呼び出します。
「.material-icons」は後からhtml内で呼び出す際に使うクラス名です。
※公式ドキュメントでは「vertical-align: middle;」は記述されていませんが、文字と上下中央させたほうが何かと便利なので記述しています。
記述方法
HTML内での使い方
「Material icons」は、特定の文字列または文字コードを、指定のクラスを付与した要素でくくることで、アイコンとして表示します。
以下URLに一覧がありますが、数え間違えてなければ940個あります（ただし重複あり）
https://design.google.com/icons/ （英語）
手順はキャプチャの通り。
画面下のガイドを見ると<i class='material-icons'>cake</i>
と<i class='material-icons'>＆#xE7E9;</i>
のように、同じ「cake」アイコンでも2種類ありますが、基本的には下の文字コード版を使うことをオススメします。
「IE9以下」と書いてありますが、実は少なくともAndroid4.4以下でも正常に表示されません。
また、CSSの疑似要素「before/after」を使った表示の際には、文字コード版の改変が必要です。
疑似要素「before/after」を使った表現
CSSの疑似要素「before/after」の「content」プロパティを指定する際にも、「Material icons」は使えます。
ただし、そのままでは正常に表示されないので、文字コードの改変が必要です。
まずこういうボタンにしたい場合
右側の>に「Material icons」を使いたい場合、文字コードは ＆#xE5CC;
になるので、それをcontent: "＆#xE5CC;";
と指定すると・・・
見事に文字化けました・・・
実は、「content」プロパティは、正常に文字コードを表示できない仕様になっているようです。
※参考文献：http://tenderfeel.xsrv.jp/css/787/
なので、文字コードの&#x を \ に変える;（セミコロン） を削除して
文字コードを\E5CC
と変えた上で、「content」プロパティに指定すると・・・
正常に表示されます。
ちなみに上記ボタンのCSSは以下。
.btn { position: relative; white-space: normal; padding: 1em 3em 1em 2em; text-decoration: none !important; color: #fff; font-size: 16px; background-color: #A08F68;}.btn::before { position: absolute; top: 50%; bottom: 50%; right: 0.5em; margin: -0.5em 0; font-family: 'Material Icons'; font-size: 24px; line-height: 1; white-space: nowrap; content: "\E5CC";}大きさや色を変える
CSSベースなので、色は「color」プロパティ、大きさは「font-size」プロパティを指定すればOK
まとめ・感想
実用的なものが数多くあるので、余程デザイン上のこだわりのあるサイトでなければ、これで十分対応できると思います。
弊社では少なくとも1年くらい前から本格的に導入していて、それ以降制作した多くのサイトで利用していますが、とても重宝しています。
ブランドアイコンがあったり、種類が豊富な「Font Awesome」と比べると見劣りするかもしれませんが、使ってみる価値はあると思います。
= うしお =
