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

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

関連記事

[CSS] CSSで縦書きにする方法

どうも、べ〜やんです。 今回は、CSSで簡単にテキストを縦書きにする方法を紹介します。 和風のデザインやサイドにメニューバーを配置する時などに便利です。 縦書きデザイン 和風テイストのデザインやサイド …

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

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

[HTML] articleとsectionの使い方

どうも、べ〜やんです。 今回は、HTMLのarticleとsectionの使い方を紹介します。 articleとsection div、article、sectionどれを使っても見た目上は同じ様に表 …

カラーコードがすぐわかる!Chromeの拡張機能ColorPick Eyedropper

どうも、べ〜やんです。 今回は、すぐにカラーコードを確認できる便利なChromeの拡張機能『ColorPick Eyedropper』を紹介します。 ColorPick Eyedropperとは 『C …

日本語フリーフォントを試せる!ためしがき

どうも、べ〜やんです。 今回は、好きな文章で複数の日本語フリーフォントを一度に確認できるサービス『ためしがき』を紹介します。 ためしがきとは 引用元:ためしがき 『ためしがき』は商用利用可能な日本語の …