コニファ・マメ知識：無料のアイコンフォント・ Google Material Icons


株式会社コニファ・無料で使えるBtoB WEB受注システム・0万石 WEB受注システム（バナー用3）
無料で使えるBtoB WEB受注システム,0万石受注システム,0円,Free
無料で使えるBtoB WEB受注システム
0万石 WEB受注システム

Google Material Icons（使える無料のwebサービス・ツール30）

Googleが提唱する Google Material Iconsは、「Google マテリアルデザイン」のためのアイコンセットです。 フルセットは、githubからダウンロードできます。

ライセンスは、クリエイティブ・コモンズ・バージョン4.0です。

https://design.google.com/icons/

上のリンクのページから、アイコン名や実体参照のコードを確認できますが、ブラウザによってはうまく表示できないことがあるようです。Google Chrome（あまり古くないバージョン）ならば、問題なく表示できます。

使い方

（１） i要素にアイコン名や実体参照のコードを記述して設置

  • https://design.google.com/icons/にアクセスし、使いたいアイコンを選んでクリックし、下側に表示されるブルーのバーの右端の「<　> ICON FONT」をクリックします。

  • 表示されたアイコン名、または実体参照をコピーしておきます。

  • アイコンを使用するhtmlの<head>にCDNを利用して、Material Iconsのスタイルシートを読み込みます。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  • アイコンを使用する箇所のfont-familyに「Material Icons」をCSS上で指定します。
 h3.title i {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	line-height: 1.6;
	font-size:24px;
	color: #0452d4;
	}
  • iタグに作成したclass名「m-icons」を指定し、コピーしておいたアイコン名かアイコンの実体参照を記述します（この例では古めのブラウザ対応を考慮して）実体参照にしています）。
 <h3 class="title">
        <i class="m-icons">&#xE87C;</i><span>&nbsp;各種集計メニュー</span>
 </h3>
  • iタグをh3要素に入れた実際のサンプル。

 各種集計メニュー

 発注メニュー

 各種設定メニュー

 インフォメーション

  • 同様のiタグをbutton要素に入れたサンプル

（２） 同じアイコンが並ぶ場合、:before疑似要素を使って、アイコン表示

  • （１）と同様に、https://design.google.com/icons/にアクセスし、使いたいアイコンをクリックして、実体参照をコピーしておきます。
  • 同じく（１）と同様にCDNを利用して、htmlの<head>に、Material Iconsのスタイルシートを読み込みます。
  • 次のサンプル（liタグを使用）ソースのようなCSSを作成し、contentにバックスラッシュと、それに続けて使いたいアイコンの実体参照の後ろ4文字を入れます。
.lmark li:before {
	content: "\e87c";
	font-family: ionicons;
	}
  • liタグに:before疑似要素を使って、リストマークの代わりに表示するサンプル
  •  li要素1
  •  li要素2
  •  li要素3
  •  li要素4