ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

Webフォントで使える!Google Fonts Icons(Material Icons)の使い方を解説

Webフォントで使える!Google Fonts Icons(Material Icons)の使い方を解説

「Font Awesome以外に使えるアイコンWebフォントってないの?」

「Google Fonts Iconsってどうやって使うの?」

悩み

こんな悩みにお答えします。

Material Icons Guideは英語のガイドしかなく、テーマの使い方などが見つからなかったので、実際にいろいろためしてみたことをまとめました。

この記事では、以下のことを解説しています。

  • CSSを読み込む方法
  • アイコン名での使い方
  • 疑似要素としての使い方

私は、2015年頃からWeb制作の仕事をはじめて、160件ほどのWebサイトを制作してきました。
その間、いろいろな失敗を繰り返し、クライアントからのフィードバックや本などで勉強することにより、多くのノウハウを得ることができました。

記事を読み終えると、Google Fonts Iconsを使ってアイコンを指定したWebサイトをつくることができます。

目次
  1. Google Fonts Iconsの使い方
    1. CSSを読み込む
    2. アイコン名で使う
      1. HTMLの書き方
      2. CSSの書き方
    3. 疑似要素として使う
      1. HTMLの書き方
      2. CSSの書き方
  2. まとめ

Google Fonts Iconsの使い方

Google Fonts Iconsで使いたいアイコンをさがします。

HTMLタグはなんでもいいのですが、公式サイトで「span」が使われているので、ここでも「span」を使います。
アイコンフォントだと「i」を使うこともあります。

CSSを読み込む

基本のアイコンを使うには以下のようにCSSを読み込みます。

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

5種類のテーマのが用意されていますが、「Filled」がデフォルトのようです。
なぜこのような順番でこのような名前をつけているのか若干疑問ではあります。

テーマ名 意味 link HTML
Outlined 輪郭 Material+Icons+Outlined material-icons-outlined
Filled 塗りつぶし Material+Icons material-icons
Rounded 輪郭 Material+Icons+Outlined material-icons-outlined
Sharp 角丸 Material+Icons+Sharp material-icons-sharp
Two tone ツートン Material+Icons+Two+Tone material-icons-two-tone

この表を参考にして以下のように書くとすべてのアイコンテーマを読み込むことができます。

複数のテーマを読み込む場合は、テーマ名を「| (パイプ)」でつなげて書きます。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Sharp|Material+Icons+Round|Material+Icons+Two+Tone">

すべてのテーマ名を書いておけばいちいち書き換えをしなくていいので、そのままどのサイトにも使い回すことができますが、読み込み速度が遅くなるので、使うアイコンで必要なテーマのみ書くことをおすすめします。

アイコン名で使う

class属性にテーマ名、テキストとしてアイコン名を書くことで自動的にspanタグがアイコンフォントに変換されます。

アイコンフォント表示
check_circle check_circle check_circle check_circle check_circle

HTMLの書き方

基本はclassに「material-icons」を書きます。
他のアイコンテーマを使う場合は、使うテーマを書きます。

Google Fonts Iconsで、使いたいアイコンをクリックすると、右にタグが表示されるので、そこからコピーし、HTMLの使いたい場所へペーストします。

<div>
  <span class="material-icons">check_circle</span>
  <span class="material-icons-outlined">check_circle</span>
  <span class="material-icons-round">check_circle</span>
  <span class="material-icons-sharp">check_circle</span>
  <span class="material-icons-two-tone">check_circle</span>
</div>

CSSの書き方

基本的ンはCSSを書く必要はなくそのまま表示させることができます。

アイコンの大きさや色などを変更する場合は、「material-icons」などにCSSを追加することは避け、別のclass名を追加し、そこにCSSを指定していっったほうがいいです。

疑似要素として使う

CSSに直接「Code point」を書いてもいいのですが、使うアイコンが増えるたびにCSSを書きたしていかないといけないので、data属性を使ってHTMLに書いていきます。

アイコンフォント表示

HTMLの書き方

class名は、「アイコン名で使う」と同じように書きます。

「Code point」の英数字を、2進数、8進数、10進数、16進数相互変換ツールで、16進数から10進数に変換し、data属性に指定します。

<div>
  <span class="material-icons" data-icon="&#59500;"></span>
  <span class="material-icons-outlined" data-icon="&#59500;"></span>
  <span class="material-icons-round" data-icon="&#59500;"></span>
  <span class="material-icons-sharp" data-icon="&#59500;"></span>
  <span class="material-icons-two-tone" data-icon="&#59500;"></span>
</div>

「data-●●」の●●の部分は自由な名前をつけることができます。
データ属性については、以下の記事で解説しています。

データ属性の取得方法(jQuery・JavaScript・CSS)【HTML】

HTMLのdata属性の使い方を知りたいですか?この記事では、data属性の使い方、JavaScript、jQuery、CSSでのdata属性の取得方法を紹介しています。ぜひご覧ください。

CSSの書き方

data属性を使う場合は、以下のように書くだけで、data属性の値を取得できるので、CSSは変更することなくアイコンを変更することができます。

span:before{
  content: attr(data-icon);
}

data属性を使わず、直接CSSで指定する場合は以下のように「Code point」を書きます。

「Code point」は4桁の英数字で、その前に「\」(半角¥、バックスラッシュ)をつけます。

span:before{
  content: "\e86c";
}

まとめ

Google Fonts Iconsの使い方を解説しました。

  • CSSを読み込む方法
  • アイコン名での使い方
  • 疑似要素としての使い方

Google Fonts Iconsが使えると、Font Awesomeの代替として使えるので便利です。