フォントアイコン

フォントアイコンについて勉強(？)してみた。
Font AwesomeとGoogle Material Icons (Font) を試しました。

fontawesome.io

design.google.com

実行例

以下実行例です。
サイズと色変えられるようにしておきました。
「!important」をつけないとGoogle Material Iconsの方はサイズが変わらなかったです。
これはライブラリ側でサイズ指定されてて、そっちが優先されるからっぽいです。

See the Pen font-icon by HIROMITSU Daisuke (@daisuke718) on CodePen.

仕掛け

それぞれlinkタグでcssを読み込んでいます。

• Font Awesome

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

• Google Material Icons(font)

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

フォントの調べ方

Font Awesomeはclass指定、Google Material Iconsはタグ内のテキストで表示するアイコン(文字)を選べる。 (個人的にはGoogleの方はどうやって動いてるか気になった。。どうやってるんだ)

• Font Awesome
  Cheat Sheetというのがあり、このページにアイコンとそれに対応するclassが一覧されている fontawesome.io
• Google Material Icons
  こっちはページで欲しいアイコンをクリックして一番右の「ICON FONT」をクリックするとテキストが分かる。
  タグはなんでも良いみたい。
  design.google.com

まとめ

大きさとか色とかcssで自在なので、ダウンロードボタンとかのちょっとしたものに使えそうですね。

以上です。