Web関連

google icon(Material icons)の使い方

  • LINEで送る

google icon(Material icons)について

これまでアイコンを使用する時は、直接HTMLで画像を表示させたりcssで設定をしたりしていました。

通常のホームページの場合は特に問題ないのですが、レスポンシブの場合は複数の設定が必要になります。
画像で入れると見ている環境によってぼやけてしまうし、かと言って大きな画像を作りcssで設定するのも大変ですし、サイトの容量をできるだけ軽くしたいので、重い画像データはできるだけ避けたい・・・とあれこれ考えていました。

そこで思いついたのが「google icon」です。

マテリアル・デザイン向けに制作されたアイコンなのですね。

このような見た目のアイコンです↓

モノカラのホームページでも使用しているのですが、アイコンの種類も豊富で設置もとても簡単!そしてレスポンシブで使用しても見た目がキレイです。

ライセンスは「表示 – 継承 4.0」なので、商用も非商用も使用・改変など自由なようです(ただし改変すると同じライセンスで配布することが条件のようです→詳しくはこちら

設置方法

では、アイコンの設置方法について説明いたします。

詳しい方法は下記へ記載しているようですが、全て英語です。
http://google.github.io/material-design-icons/

設置の流れ

  • step01→ Material iconsフォントを表示させるためのコードをHTMLのhead内へ追加する
  • step02→ HTML内のアイコンを表示させたい場所へ指定のコードを書く
  • step03→ 見た目がキレイになるようにcssを調整する

この3ステップだけです!では、それぞれの詳細をご説明していきます。

step01 Material iconsフォントを表示させるためのコードをHTMLのhead内へ追加する

<head></head>内に以下にコードを追加します。
下記のコードをそのままコピーして追加してください。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

step02  HTML内のアイコンを表示させたい場所へ指定のコードを追加する

下記のサイトから好きなアイコンを選んでクリックするとコードが表示されます。
後はそのコードをコピーして、HTML内のアイコンを表示させたい場所へ貼り付けます。
https://design.google.com/icons/

2通りコードが表示されますが、図のAはモダンブラウザのみに対応できれば良い時。BはIE9未満に対応させたい時に使用するようです。コードだけ見るとAのほうがどのようなアイコンを使用しているのか分かりやすいですね。

step03 見た目がキレイになるようにcssを調整する

* Material icons*/
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
 
  /* WebKit*/
  -webkit-font-smoothing: antialiased;
  /* Chrome、Safari*/
  text-rendering: optimizeLegibility;
 
  /* Firefox*/
  -moz-osx-font-smoothing: grayscale;
 
  /* IEサポート */
  font-feature-settings: 'liga';
}

最後はcssで見た目を調整していきます。

フォントの大きさを変えたり、空白を調整したりとアイコンの表示をcssでお好きなように微調整してください。

以上で設置は完了です。簡単に設置でき、さまざまな環境に適用できるgoogle icon(Material icons)は本当におススメです。
とても分かりやすい寝ログ様のサイトを参考にさせていただきました→
http://nelog.jp/how-to-use-google-material-icons

  • LINEで送る