有名アイコンフォントを手軽に表示させることができる「icongram」

有名アイコンフォントを手軽に表示させることができる「icongram」

便利そうだったので備忘録兼ねて紹介します。
「icongram」はEntypo・ Feather・Font Awesomeといった種類も多く有名なアイコンフォントを手軽に表示させることができるもので、よくある特定のURLでダミーイメージを表示させるような感覚でアイコンを表示させることができます。

アイコンは下記6ライブラリが用意されており、それぞれの見栄えや名前などについてはサイト内で一覧化されているので、そちらで確認することができます。

  • Entypo
  • Feather
  • Font Awesome
  • Material
  • Octicons
  • Simple

使用する際は下記のようなURLをimgbackgroundで指定していきます。

https://icongram.jgog.in/{library name}/{icon}.svg?[options]

ハイライト表示している箇所は任意で変更する部分になっており、それぞれ下記のようなルールで指定していきます。

library name
上で挙げた6ライブラリの中から使用するライブラリ名を指定します。
例えば、「Entypo」を使いたいならentypo、「Font Awesome」を使いたならfontawesomeといったようにすべて小文字で指定します。
icon
使用したいアイコン名を指定します。
サイト内で各ライブラリ毎のページにアイコンが一覧化されているので、そこで確認することができます。
options
ここではサイズとカラーの指定ができ、どちらも未指定(記述をしない)の場合はサイズが32pxで、カラーは#000000がデフォルト値となります。
サイズは最大500pxまで指定が可能となっており、カラー指定はHexの6桁で指定する必要があります。
指定する際は例えばサイズであれば?size=32のような形で指定し、さらにカラーも同時に指定したい場合は?size=32&color=ff0000といったように&で繋げて指定をします。
また、「Simple」のみのオプションとしてcoloredというのがあり、これを使用した場合はそのアイコンのブランドカラーを自動で指定してくれます。

実際に使用すると以下のようなアイコンを表示することができます。

※左から「Feather - droplet」「Font Awesome - heart」「Material - cat」

<!-- Feather - droplet -->
<img src="https://icongram.jgog.in/feather/droplet.svg?size=64&color=3498db">

<!-- Font Awesome - heart -->
<img src="https://icongram.jgog.in/fontawesome/heart.svg?size=64&color=e74c3c">

<!-- Material - cat -->
<img src="https://icongram.jgog.in/material/cat.svg?size=64&color=e67e22">

そのまま案件とかで使うのはあれですが、よく利用されるものはひと通り揃っている点も嬉しいですし、ちょっとしたテストとかで一時的に利用したい場面などでは手軽に使えて便利だと思います。

Close the search window,
please press close button or esc key.