2023年1月8日日曜日

BloggerでGoogle Material iconsを静的アイコンフォントとして使用する

Material Symbols and Icons - Google Fonts

<head> 内に追加

<link href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0' rel='stylesheet'/>

上は標準のカスタマイズのコード
(Fill: 0 Weight: 400 Grade: 0
Optical size: 48)

アイコンの挿入

Favorite (https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Afavorite%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4048)
の例

右メニューの Inserting the icon の箇所のコードをコピー&ペーストします

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

結果

favorite

ま、Googleが <span> タグでの挿入を推奨している様なので <span> タグを使った方が良いでしょう

F(uriouz)

欲しいものリスト
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

0 comments:

コメントを投稿

スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。

注: コメントを投稿できるのは、このブログのメンバーだけです。

Recent Posts

 
"The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License."