テック

Google Fonts Iconsの紹介

2021年10月30日 by single コメントはまだありません

今回はグーグルが提供するウェブアイコン「Google Fonts」の『Icons』を紹介します。

Google Fonts Iconsの紹介

サンプル

home home home
account_circle account_circle account_circle
supervisor_account supervisor_account

HTMLコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Google Fonts Icons </title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet">
</head>
<body>
    <span class="material-icons-outlined">
        home
    </span>
    <span class="material-icons">
        home
    </span>
    <span class="material-icons-two-tone">
        home
    </span>
    <br />

    <span class="material-icons-outlined" style="font-size:48px;">
        account_circle
    </span>
    <span class="material-icons-round" style="font-size:48px;">
        account_circle
    </span>
    <span class="material-icons-two-tone" style="font-size:48px;">
        account_circle
    </span>
    <br />

    <span class="material-icons-outlined" style="color: rgba(0, 0, 0, 0.26); ">
        supervisor_account
    </span>
    <span class="material-icons-sharp" style=" color: #FB8C00;">
        supervisor_account
    </span>
<body>
</html>

デモ

Google Fonts Icons

アイコン数

１８カテゴリー（「Action」「Alert」「Audio & Video」「Communication」「Content」「Device」「Editor」「File」「Hardware」「Home」「Image」「Maps」「Navigation」「Notification」「Places」「Search」「Social」「Toggle」）もあり、アイコン数は１０００を超えています。

アイコンの種類

アイコンの数に加えて、同じアイコンでも、少しタイプが違うアイコンも用意されています。

アイコンの種類は、

  • Outlined
  • Filled
  • Rounded
  • Sharp
  • Two tone

セットアップ方法

リンクタグ

最も簡単なセットアップ方法は「Link」タグでGoogle Fontsのページにリンクする方法です。

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

ダウンロード

リンクで十分ですが、ダウンロード版も利用できます。

以下のページからダウンロードできます。

Downloading everything

実際にダウンロードできるリンクは以下ですが、リンクが切れている可能性もあることはご了解ください。

「latest stable zip archive」の場合

「latest stable zip archive」をダウンロードすると、以下のような書庫ファイルがダウンロードできます。

「latest stable zip archive」の場合

そのフォルダにある「iconfont」を開いてみてください。

「iconfont」 フォルダ

フォルダを開くと「material-icons.css」というファイルがあるので、そのファイルをリンクすればです。

HTMLコードにすると以下のようになります。

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8">
    <title>Google Fonts Icons </title>
    <link href="/assets/material-design-icons-3.0.1/iconfont/material-icons.css" rel="stylesheet">
</head>
<body>
    <span class="material-icons">
       search
    </span>
    <span class="material-icons">
        home
    </span>
    <span class="material-icons">
        account_circle
    </span>
<body>
</html>

「latest stable zip archive」の場合は、「Regular」（Filled）のアイコンしか対応してないようです。

定義方法

アイコンをスタイルシートを読み込んだ後、HTMLコードを埋め込めば、ウェブアイコンを表示させられます。

SPANタグを利用し、スタイルは「class」で指定し、利用したいアイコンは、SPANタグの間にアイコン名称を設定してください。

Outlined<span class=”material-icons-outlined“>garage</span>garage
Filled<span class=”material-icons“>garage</span>garage
Rounded<span class=”material-icons-round“>garage</span>garage
Sharp<span class=”material-icons-sharp“>garage</span>garage
Two tone<span class=”material-icons-two-tone“>garage</span>garage

スタイルの変更の仕方

サイズの変更の仕方

サイズを変更する場合にはStyleで「font-size」を指定すれば、簡単にサイズを変えられます。

例えば、48pxにする場合には、以下のようにします。

<span class="material-icons-outlined" style="font-size:48px">star</span>
star

色の変更の仕方

色も簡単に変更でき、Styleで「color」を指定すれば変更できます。

<span class="material-icons-outlined" style="color:red">star</span>
<span class="material-icons-outlined" style="color:#FFD700">star</span>
<span class="material-icons-outlined" style="color: rgba(255, 215, 0, 0.5)">star</span>
star star star

リンクだけで簡単にインストールできるので、便利なウェブアイコンだと思います。

以上、ご参考まで。

ご参考

関連ページ