Web関連

google icon(Material icons)の使い方

  • このエントリーをはてなブックマークに追加
blog160622

google icon(Material icons)について

これまでアイコンを使用する時はいつも、画像を制作してcssで設定をしたり直接HTMLへ記載していました。

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

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

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

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

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

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

設置方法

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

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

設置の流れ

  • step01→ Material iconsフォントをcssで呼び出す
  • step02→ cssへ利用するために必要なコードを追加する
  • step03→ HTML内のアイコンを表示させたい場所へタグを書く

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

step01 Material iconsフォントをcssで呼び出す

<head></head>内に以下にコードを書きます。

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

step02 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でお好きなように微調整してください。

step03  HTML内のアイコンを表示させたい場所へコードを書く

さて最後は、HTML内の表示させたい場所へ表示させるためのタグを書きます。
下記のサイトから好きなアイコンを選んでクリックすると、タグが表示されます。
https://design.google.com/icons/

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

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

  • このエントリーをはてなブックマークに追加