Menu
テーマ切り替え

Google推奨のマテリアルアイコンも結構いいかも

Google推奨のマテリアルアイコンも結構いいかも

Googleが提供し始めた無料のアイコンフォント https://fonts.google.com/icons

普段はFont Awesomeにお世話になっていますが、良さそうなのでご紹介。 Font Awesomeについての記事は こちら

WEB FONTの読み込み

〜の間に下記を入力。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

これでWEB FONTの読み込み環境が整いました。

記述する場所については特に指定はないですが、分からなかったら似たようなコードが書かれている部分でOKですよ。

問題ないだろうけど、うまく表示されなかったら読み込みの順番(行)とか変えてみてください。

ICONの表示方法

Font Awesomeとはちょっと違うのですが、感覚的に扱いやすいかと思います。

<i class="material-icons">xxx</i>

xxxの部分に各ICONに指定されているテキストを入れて表示させます。

表示例

pets pets

watch watch

サイズや色を指定も簡単ですよ

Googleの 公式ドキュメント にも記載されていますが、classに追加する事でサイズや装飾なども指定できます。

アイコン数などこれからですが、扱いやすいとは思うので是非お試しください。

Share:

RU DESIGNの無料Webツール集

画像処理、テキスト整形、AIツールなど、制作や作業を効率化する便利ツールをブラウザで無料公開中!

ツールを見る →
Contact & Request

お問い合わせ・お仕事のご相談

Webサイト制作、システム開発、サイト保守・改善などのご依頼や技術的なご相談を承っております。専用フォームよりお気軽にご連絡ください(2営業日以内にご返信いたします)。

フォームより24時間受付 初回ご相談・お見積り無料 全国オンライン対応
RU DESIGN
AUTHOR

RU DESIGN

Webサイト制作・システム開発・保守運用を手がけています。一般からナイト系まで幅広く対応し、制作で培った実践的なノウハウや技術知見、自作Webツールも公開中。制作のご相談もお気軽にどうぞ。