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に追加する事でサイズや装飾なども指定できます。
アイコン数などこれからですが、扱いやすいとは思うので是非お試しください。
