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

関連記事

アニメーション背景を作成!Animated CSS Background Generator

どうも、べ〜やんです。 今回は、アニメーション背景を作成してくれる『Animated CSS Background Generator』を紹介します。 Animated CSS Background …

複数のレスポンシブを同時に確認!Chromeの拡張機能ResponsiveViewer

どうも、べ〜やんです。 今回は、複数のレスポンシブを同時に確認できるChromeの拡張機能『ResponsiveViewer』を紹介します。 ResponsiveViewerとは Responsive …

フォントを簡単に調べられる!Chromeの拡張機能WhatFont

どうも、べ〜やんです。 今回は、webサイトで使われているフォントを簡単に調べられるChromeの拡張機能『WhatFont』を紹介します。 WhatFontとは 『WhatFont』はwebサイトで …

グラデーションの無料コレクション!WebGradients

どうも、べ〜やんです。 今回は、180個の線形グラデーションの無料コレクション『WebGradients』を紹介します。 WebGradientsとは 引用元:WebGradients 『WebGra …

[css] Flexboxの子要素

どうも、べ〜やんです。 今回は、Flexboxの使い方の子要素に使うプロパティを紹介します。 横並び、親要素についてはこちら↓ [css] 横並び、flexboxの使い方 flexboxの種類 (子要 …