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 Chrome11
Mozilla Firefox3.5
Apple Safari5
Microsoft IE10
Microsoft Edge18
Opera15
Apple MobileSafariiOS 4.2
Android Browser3.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 サンプルコード

 

関連記事