▲TOPへ戻る

Google Fonts Material Symbols アイコンをウェブで表示する方法

Google Fonts Material Symbols

導入

Google Fonts のリンク

Google Fonts

ここではMaterial SymbolsOutlinedについて説明します。

Outlined : 普通のアイコン

Rounded : 少し丸みがかったアイコン

Sharp : 普通より丸みのないアイコン

Google Fonts Material Symbols

画面右端の設定でカスタマイズします。

Fill : 塗りつぶすかどうかの設定

Weight : 線の太さ

Grade : Dark of Light モードでの微調整

Optical size : アイコンサイズが変更されても、形が崩れないよう微調整

Google Fonts Material Symbols

HTMLに記述

Variable icon font でもいいのですが、いろいろ調整ができるせいか、 stylesheetのサイズが大きくなり、速度が遅くなるデメリットがあります。

ここでは、 Static icon fontlinkをコピーし、 HTMLのheadタグの中に記述します

Google Fonts Material Symbols
<head>
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
  />
</head>
<body>
  <span class="material-symbols-outlined"> home </span>
</body>

以下のように表示されました。

home

CSSでスタイル変更

色とサイズの変更ができます。

.material-symbols-outlined {
  font-size: 36px;
  color: orange;
}

home

まとめ

  1. Google Fonts Material Symbols で手軽にアイコンが使える
  2. headタグに一行加えるだけ
  3. bodyタグ内に要素を貼り付ける
  4. CSSでスタイル変更できる

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ