Menu
テーマ切り替え

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

SS 5

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に追加する事でサイズや装飾なども指定できます。

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

RU DESIGN
AUTHOR

RU DESIGN

個人開発者として、Webサイト制作やAIを活かした開発に取り組んでいます。このブログでは、私が実際に試して「これは使える!」と思った技術や、自作の便利ツールをシェアしています。一緒に技術を楽しんでいきましょう!

この記事をシェア:

関連記事