Googleマテリアルアイコンの使い方とよく使うアイコンコード

OtherGoogle,アイコンフォント

GoogleのMaterial iconsは、無料で利用できるマテリアルデザインのアイコンが多数あり、SVGやPNGで保存できる他、アイコンフォントとしても利用できます。

Webサイトで簡単に利用する方法についてです。

無料アイコンフォント

Font Awesome

無料のアイコンフォントとしては、「Font Awesome」が有名で、WordPressテーマには、これを簡単に利用できるものが数多く存在します。

無料アイコンの数は、現在1,600種類以上。
Font Awesome

Font Awesome

Font Awesomeの使い方は以下をご覧ください。

 

Material icons

Material icons」はGoogleフォントになる為、表示速度が速い事が特徴です。(Google推奨なのも利点)

無料アイコンの数は、現在1,800種類以上。
Material Icons

 

対応ブラウザ

ブラウザ バージョン
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

アイコンサンプル

Material icons

 

Material iconsの使い方

マテリアルアイコンガイド(Google)

 

サイトで利用するには、以下の手順で簡単。

  1. Material iconsフォントのCSSを呼び出すコード追記(1行)
  2. アイコンフォントを表示する場所にHTMLを書く(コピペ)

 

1.呼び出しコード追記

ルクセリタスをご利用の方へ

ルクセリタスVer.3.18.0~をご利用の場合は、この手順は不要です。

 

<head></head>内に以下の1行を追記します。

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

 

2.アイコンフォントのコード記述

検索窓から検索、またはカテゴリー選択で表示アイコンを絞って探す事も可能です。

Material Iconsから、利用したいアイコンを選択。

 

Material icons

 

 

①直書きの場合

記事内などに直接記述する場合は「HTMLコピー」部分をコピぺ

<span class="material-icons">アイコン名</span>

 

アイコンデザイン選択も可能です。

2色にした場合

<span class="material-icons-two-tone“>アイコン名</span>

Material icons

 

サイズを変えたい場合

1.HTML記述にサイズを追記

<span class="material-icons" style="font-size: 18px;">home</span>

 

<以下のように記述したサンプル>

<span class="material-icons">home</span> 
<span class="material-icons" style="font-size: 18px;">home</span> 
<span class="material-icons" style="font-size: 22px;">home</span>

home
home
home

 

2.色々なサイズをあらかじめCSS定義しておく場合は、そのクラス名をHTMLにも記述します。

<span class="material-icons" class="mi18″>アイコン名</span>

CSS

.mi18 { font-size: 18px; }
.mi22 { font-size: 22px; }
.mi26 { font-size: 26px; }

 

色を変えたい場合

サイズ変更の際と同様に、スタイルを記述すれば可能です。

<span class="material-icons" style="font-size: 24px; color: pink;">home</span>

home

 

②CSS利用の場合

アイコンフォントのコードをコピー

上記サンプルでの「Home」の場合「e88a」がアイコンコードです。

CSSで利用する際は以下のように「content」で「\」の後に、このコードを記述します。

サンプルコード

a:before {
content: '\e88a';
font-family: 'Material Icons';
}

 

③画像保存の場合

SVGまたはPNGでダウンロード

 

よく使うアイコンコード

よく使われそうなもの50種をまとめています。

Material icons サンプルコード

 

関連記事