FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

100種類以上のGoogleのアイコンがつかえる。Material icons

   

03

アイコンを作成するのは大変ですよね。特に大量になると、時間も手間もかかります。

そんな時に便利なのが、Googleの「Material icons」です。

下のアイコンは、すべてWebフォントです。

faceassignment_indlocation_onandroidfeedbackflight_takeoffgradehttps

Webフォントだけでなく、SVGやPNGも利用できるのでカンプの作成にも便利です。

SPONSORED LINK

アイコン一覧

すべてのアイコンは下記でみることができます。

Material icons

対応ブラウザ

Google Chrome 11
Mozilla Firefox 3.5
Apple Safari 5
Microsoft IE 10
Opera 15
Apple MobileSafari iOS 4.2
Android Browser 3.0

最近のブラウザには、大体対応していますね。

1分でできる使い方

CSSファイルへのリンクを記述する

<head>内に下記のCSSへのリンクを挿入します。

「.material-icons」クラスを記述

下記の「.material-icons」クラスを追加します。

HTMLにアイコンフォントを記述

01

「< >ICON FONT」をクリックします。

02

をHTMLにコピペします。

IE9の場合は、

をコピペします。

accessibleが表示されます。

色の変更

フォントなので、CSSで変更できます。

accessibleaccessibleaccessible

フォントサイズの変更

フォントサイズもfont-sizeで変更可能です。

accessibleaccessibleaccessibleaccessible

まとめ

Material Icons Guide」に使い方が掲載してありますので、参考にしてください。

volume_upvolume_offなど、状態に合わせたアイコンがあるのが便利ですね。

※ラインセンスは「CC BY 4.0」です。

 - アイコン, コーディング