Google Font のアイコンを使う方法

個人的な備忘録です。

今まではよく Fontawesome のアイコンを利用していましたが、最近Googleフォントを見ていたら、アイコンも提供していることに気が付きました。Google Fontsのアイコンは、種類が豊富で、ページ速度にほとんど影響を与えないほど軽量です。今回は、このアイコンを使ってみようと思います。

手順

まずは、 アイコンプロバイダーではよくあるように以下のリンクを header ないに挿入します。

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

このリンクで、Googleのアイコンセット「Material Icons」を読み込みます。

その後、アイコンをHTMLに追加するだけでOKです。

例えば、以下のように記述すると、家のアイコンを表示できます。

<span class="material-icons">home</span>

と挿入すると、 家のアイコンを表示することができます。

アイコンの名前は、以下のように各アイテムの Icon name から確認することができます。 アンダーバーで区切られているので注意が必要です。

スタイルのカスタマイズ

スタイルのカスタマイズも可能になっているので

<style>
  .material-icons {
    font-size: 48px; /* アイコンのサイズ */
    color: #007bff;  /* アイコンの色 */
  }
</style>

を使うことで、サイズや色の変更も可能になります。

Google Fontsアイコンの利点

Google Fontsのアイコンを使うことには、いくつかの利点があります：

1. 軽量：アイコンはベクター形式（SVG）で提供されるため、サイズが小さく、ページの読み込み速度にほとんど影響を与えません。
2. 高い互換性：GoogleのCDNを利用するため、ブラウザのキャッシュ機能が活用され、他のGoogle Fontsを使っている場合、アイコンも自動的にキャッシュされます。
3. 多彩なデザイン：アイコンの種類が豊富で、ウェブデザインに必要なアイコンを手軽に取り入れることができます。

アイコンの応用例

さらに、アイコンを使ったデザインの応用例もいくつか挙げてみましょう。

ナビゲーションメニュー

<nav>
  <ul>
    <li><span class="material-icons">home</span> ホーム</li>
    <li><span class="material-icons">info</span> 会社情報</li>
    <li><span class="material-icons">contact_mail</span> お問い合わせ</li>
  </ul>
</nav>

ボタンにアイコンを追加

<button>
  <span class="material-icons">search</span> 検索
</button>

これで、ボタンやメニューにもアイコンを簡単に組み合わせることができます。