Menu
テーマ切り替え
ほのぼの情報サイト
ほのぼのゲーム情報GAME PON-POO
無料画像素材

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

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

RU DESIGN
AUTHOR

RU DESIGN

個人でWeb制作をしています。一般からナイト系まで幅広く対応し、実践的なノウハウや自作ツールをこのブログで公開中。制作のご相談もお気軽にどうぞ。

この記事をシェア: