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」です。

PR

PR

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

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

レスポンシブ用の画像を複数のサイズで自動生成

Responsive Image Breakpoints Generator レスポンシブWebデザインで、マルチデバイスに対応させる際、読み込む画像のサイズを複数設定したい場合があります。 そんな時 …

HHKBのCtrlのみで英語・日本語に切り替える方法

PFU Happy Hacking Keyboard Lite2 for Macの英語配列を購入しました。 それまで、Apple純正キーボードの日本語配列を利用していました。 英語配列に変更してから、 …

レスポンシブWebデザインを制作して困ったことの解決方法

まだレスポンシブの案件が少なく、 知識もスキルもまだまだなのですが、 いくつか作ってみて、困ったことの解決方法です。 もくじ Javascriptを使った場合の端末ごとの処理 フォントによる見栄えの違 …

今からでも間に合う!レスポンシブWebデザイン作り方のまとめ

photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについ …

AltのチェックにはAlt属性値が表示できる「Web Developer」が便利

サイトを制作していて、Altに何が入っているのかチェックするのは結構大変ですが、私はずっとFirefoxのプラグインのWeb Developerを使っています。 Web Developer 使い方 い …

PR




人気の記事

プロフィール

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。