簡単便利！Googleマテリアルアイコンの使い方
簡単便利！Googleマテリアルアイコンの使い方
カテゴリー：ウェブデザイン
ウェブデザインのアクセントとしてアイコンを自分でつくっているけど、必要以上に手間がかかったり、野暮ったかったりしませんか？
ここで紹介するGoogleマテリアルアイコン を使うと、誰でも簡単にウェブサイトなどでクオリティの高いアイコンを使えるようになります。
この記事ではGoogleマテリアルアイコンの使い方とそのカスタマイズ方法をお伝えします。
Contents
Googleマテリアルアイコンとは
Googleマテリアルアイコンとはグーグルの持つデザインガイドラインに沿って作られたシンプルで無駄のないアイコン素材集です。これらアイコンは商用利用可能でウェブサイトを始め様々なプロジェクトにクレジット表記なしで利用が可能です。
Outlined、Filled、Rounded、Sharp、Twotoneの５種類あり またSVGやPNGでも保存できる上改変が可能で、紙モノのデザインにも活用できます。
Outline
Filled
Rounded
Sharp
Twotone
対応ブラウザ
モダンブラウザはほぼGoogleマテリアルアイコンに対応していますが、念のため対応バージョンも確認しておいた方がいいかも知れません。
| ブラウザー | バージョン |
|---|---|
| Google Chrome | 11 |
| Mozilla Firefox | 3.5 |
| Apple Safari | 5 |
| Microsoft IE | 10 |
| Microsoft Edge | 18 |
| Opera | 15 |
| Apple MobileSafari | iOS 4.2 |
| Android Browser | 3.0 |
Googleマテリアルアイコンの使い方
1.Googleマテリアルアイコンの読み込み
使い方はとても簡単です。まず、このコードを<head>内にペーストしCSSを読み込めるようにします。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
2.使いたいアイコンのコードを記述
Googleマテリアルアイコン のページに行き、使いたいアイコンをクリックし、HTMLをコピーして使いたい場所にペーストします。
もうこれだけです。
<span class="material-icons">home</span>
ただ、これはFilledの場合のみ対応が可能で、もし使いたいものがOutlinedやRounded、Sharp、Two toneの場合は注意が必要です。
<head>内にペーストする読み込みコードを下記に変更しないとOutlinedやRounded、Sharp、Two toneは読み込むことができません。
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
カスタマイズ方法
色、サイズなどもカスタマイズが可能でここではCSSでclass設定を用いてカスタマイズする方法をご案内します。
サイズ変更
サイズを18pxにするため md-18 というクラスを設定。
<span class="material-icons md-18">face</span>.material-icons.md-18 { font-size: 18px; }色変更
色をオレンジにするため orange600 というクラスを設定。
<span class="material-icons orange600">face</span>.material-icons.orange600 { color: #FB8C00; }文字と縦位置を合わせる
アイコンの位置と文字の縦位置がズレる時もCSSで調整可能です。
.material-icons{
display: inline-flex;
vertical-align: middle;
}
まとめ
文頭やリンクボタン、見出しなどに使うとアクセントになるウェブアイコン。 ただ一から作るとなるとそれなりに時間がかかってきます。
オリジナリティの高いアイコンを作成する必要がある場合以外、このようなサービスを使う方がメリットも大きいように思います。 大幅に手間が省けるうえ、多くの場合クオリティもアップするのではないでしょうか。
お気軽にお問い合わせ下さい
ワンストップで様々なツールの作成が可能です