CODING SERVICE

アイコンを簡単に表示できる!Icongram

投稿日:


どうも、べ〜やんです。

今回は、簡単にアイコンを表示できるサービス『Icongram』を紹介します。





Icongramとは


引用元:Icongram

Icongramは9つのアイコンライブラリからAPI経由でアイコンを使用できるサービスで、8,000以上のアイコンを選択することができます。

使用できるアイコンライブラリ

  • Clarity icons
  • Devicon
  • Entypo icons
  • Feather icons
  • Font Awesome icons
  • Jam icons
  • Material Design icons
  • Octicons
  • Simple icons

それぞれのライブラリのリンクも貼られているので、それぞれのライブラリから直接使用することもできます。

Icongram


使い方


使い方は簡単です。

ライブラリの中から使用するアイコンを選びライブラリ名、アイコン名、サイズ、カラーコードなどを指定してAPIとして使えるURLを作ります。

imgタグでURLを呼び出して使用します。

<img src=”https://icongr.am/{library name}/{icon name}.svg?size={number}&color={hex}”>

See the Pen dyPbJZo by beeyan (@orientado) on CodePen.


おわりに


今回は、簡単にアイコンを表示できるサービス『Icongram』を紹介しました。

非常に簡単に使用できて便利ですね。



-CODING, SERVICE
-

執筆者:


comment

関連記事

全画面スクリーンショット!Chromeの拡張機能Full Page Screen Capture

どうも、べ〜やんです。 今回は、ワンクリックで全画面スクリーンショットができるChromeの拡張機能『Full Page Screen Capture』を紹介します。 Full Page Screen …

HTML文法チェックサービスMarkup Validation Service

どうも、べ〜やんです。 今回は、HTMLの文法にミスがないかを自動で判別してくれるサービスMarkup Validation Serviceを紹介します。 HTMLを独学で勉強していて自分の知識がどれ …

インターフェイスと配色をコード化!ColorTool

どうも、べ〜やんです。 今回は、インターフェイスと配色をコード化してくれるMaterialDesignのColorToolを紹介します。 ColorToolとは 引用元:Color Tool-Mate …

爆速!!Emmetを使う

どうも、べ〜やんです。 今回は、コーディングのスピードが抜群に速くできる方法のEmmetの使い方を紹介します。 Emmetとは HTMLやCSSを記述するときに全て手打ちしていると時間がかかってしまい …

[HTML] 表を作るtable

どうも、べ〜やんです。 今回はHTMLでtableタグを使って表を作る方法を紹介します。 表の例 表を使う 表を使うと伝えたい情報を分かりやすく伝えることができます。 HTMLには簡単に表を作れる便利 …