無料で商用利用可能なアイコンセット Google Material icons
2016/07/12
Googleでは、マテリアル・デザイン仕様のアイコンセット「Material icons」が提供されており、アイコンも随時追加されています。
これらは、Webアイコンとして簡単に使用することができます。
Google Material icons
Material iconsのアイコンセットには、アイコンが随時追加されており、ダウンロードして使用することもできるし、Webサイトの場合はWebアイコンとして直接標示することが可能です。ライセンスは、creative commons が採用されており、アイコンの使用や改変も自由。
※マテリアル・デザインとは、2014年にGoogleが提唱した新しいデザインガイドラインで、制作物に統一されたデザインを取り入れることで、統一感のある使いやすいUIを目指したもの。
アイコンサンプル
Webアイコンとして使用したサンプルはこんな感じです。
shopping_cart
add_shopping_cart
android
card_giftcard
rss_feed
mail
phone_iphone
文字と同じ扱いなので、CSSで色も変えれます。
check_circle
info
phone
Google Material iconsの使い方（Webアイコン）
Material iconsをWebアイコンとして使用する方法を解説していきます。
リンクをクリックしサイトに行きます
まずは、Googleの Material icons のサイトに行きます。表示されたページを下にスクロールするとアイコンがカテゴリー分けされて表示されています。この中から使用したいアイコンを選びクリックします。
アイコンをクリックすると、画面下にブルーのバーが表示されます。一番右の「ICON FONT」をクリックします。
ICON FONT
「ICON FONT」をクリックすると、使用するための情報が表示されます。
まずは、「STEP 1」の「instructions」をクリックし、「Material Icons Guide」のページを表示します。CSSのためのlinkタグをコピペします。
linkタグをコピペする。
「Material Icons Guide」のページが表示されたら、スクロールして下の画像の箇所を表示し、linkタグコピーします。
分からない場合は、下のコードをコピーしてください。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
コピーしたlinkタグを、使用したいページのhead要素の中に貼り付けます。
※なお、複数のアイコンをページの中で使用する場合も、linkタグは１つだけで構いません。
iタグをコピペする。
linkタグのコピペが終わったら、今度は実際に表示するためのiタグをコピペします。
「STEP 2」に表示されている「iタグ」を、アイコンを表示したい場所にコピペします。
あとは、HTMLをブラウザで表示するだけで、アイコンが表示されていると思います。
