google iconを使ってアイコンをwebに使用する方法

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

 

ウェブサイトにアイコンを使用したいとき。わざわざアイコンを画像で書き出さなくても、google iconを使えば、簡単に使用できます。

その方法をご紹介します。

1.googleのサイトから使いたいフォントを探す

2.入れたいアイコンが決まったら、htmlに入れ込む

head部分に

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

html内の入れたい場所に

<span class="material-symbols-outlined">
crown
</span>

 

参考URL:https://developers.google.com/fonts/docs/material_symbols?hl=ja

コメントする

CAPTCHA