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

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

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


 

無料アイコンフォント

Font Awesome

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

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

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

アイコンフォントFont Awesome 6の使い方・向きやサイズ、動き設定
Font Awesome Ver.6 について 2020年6月 Font Awesome 6リリース Font Awesome 6 がリリースされました。自身が使っているテーマで、アイコンフォント利用が可能な場合は、テーマの対応を待ちましょ...

 

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の使い方

マテリアルアイコンガイド(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から、利用したいアイコンを選択。

 

 

 

①直書きの場合

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

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

 

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

2色にした場合

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

 

サイズを変えたい場合

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種をまとめています。

 

Googleマテリアルアイコン:よく使うアイコンコード50種
GoogleのMaterial iconsは、無料で利用できるマテリアルデザインのアイコンが多数あり、SVGやPNGで保存できる他、アイコンフォントとしても利用できます。 Webサイトで簡単に利用する方法については以下をご覧ください。 Ma...

 

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています

View Comments (1)

  • ありがとうございます!この記事は dogs を使った parametrical icon の使い方をabadillies !senstive に認識する方法について特に興味がありました。私たちのプロジェクトでは、この手法を使い始めた方がい군стваです。 Thank you for sharing your knowledge!