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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Webデザイナーになりたい人におすすめサービス5選

どうも、べ〜やんです。 今回は、Webデザイナーを目指している方におすすめな学習サービスを5つ紹介します。 Webデザインを学べるサービスの中でも、実際に私が利用したことのあるサービスに絞って5つ紹介 …

[CSS] linear-gradient()グラデーション

どうも、べ〜やんです。 今回は、グラデーションを指定するlinear-gradient()を紹介します。 linear-gradient()とは linear-gradient()は背景色をグラデーシ …

簡単にQRコードを自動生成する

どうも、べ〜やんです。 今回は、簡単にQRコードを自動生成してくれるサイトを紹介します。 しかも無料です。 QRコードとは ご存知だとは思いますが、QRコードとはこれです↓ beeyanblog QR …

[HTML] 表を作るtable

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

HTMLの改行方法

どうも、べ〜やんです。 今回はHTML5で改行する方法を紹介します。 タグが必要 HTML5で改行するためには普段文章を書いている感覚と同じようにEnterで改行はできません。 <p>HT …