コニファ・マメ知識:無料のアイコンフォント・ 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(あまり古くないバージョン)ならば、問題なく表示できます。

使い方

(1) 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要素に入れたサンプル

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

  • (1)と同様に、https://design.google.com/icons/にアクセスし、使いたいアイコンをクリックして、実体参照をコピーしておきます。
  • 同じく(1)と同様に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