様々なサイトのアイコンフォントから目当てのものを一括検索するなら「GlyphSearch」が地味に便利

最近は、アイコンフォントを利用しているサイトもかなり多いです。

アイコンフォントと言ったらFont Awesomeが最も有名でしょうか。その他にも、今現在多数のサイトがアイコンフォントを公開しています。

ただ、Font Awesomeだけで結構な種類のアイコンがあるのに、自分の欲しいデザインのアイコンフォントを複数のサイトから探すのは、結構大変です。

今回はそんな時に、探すのに便利なGlyphSearchというアイコンフォント検索サービスの紹介です。

photo by FontFont

スポンサーリンク
レクタングル(大)広告

GlyphSearchとは

GlyphSearch- Search for icons from Font Awesome, Glyphicons, IcoMoon, Ionicons, Octicons and Foundation

GlyphSearchは、複数のアイコンフォントサイトの中から、手軽に目的のアイコンを検索できるサービスです。

今現在、以下のアイコンフォントサイトに対応しています。

  1. Font Awesome
  2. Glyphicons
  3. IcoMoon
  4. Ionicons
  5. Octicons

アイコンフォントって、便利なんですけど、目的のデザインのアイコンを探し出すのが結構手間なんですよね。

GlyphSearchはそんなアイコン探しの手間を軽減してくれます。入力フォームにキーワードを入力することで、一括で複数サイトから抽出することができます。

例えば、GlyphSearchで「heart(ハート)」と検索すると、以下のようにハートに関するアイコンだけが表示されます。

ハードで検索

Facebookで検索するとこんな感じ。

Facebookで検索

Font Awesomeにはないデザインを探したいというときには便利かもしれません。

クラスコード取得に嬉しい機能

一応、それぞれのアイコンフォントサイトごとに検索ができるようにはなっています。

Font Awesomeだと、以下のような検索フォームから抽出が行えます。

Font Awesomeの検索フォーム

なので、Font Awesomeのアイコンしか利用していない場合は、それで十分と思うかもしれません。

ただ、GlyphSearchには、アイコンフォント一括検索のほかに嬉しい機能がもう1つあります。

アイコンのクラスコードをクリップボードにコピーしてくれる

GlyphSearchで地味に便利なのが、検索結果から表示されたアイコンをクリックすると、フォントを利用するためのクラスコードをクリップボードにコピーしてくれます。

例えば、Font Awesomeの検索結果から、ハートのアイコンの利用コードを取得したかったとします。

そういった場合は、検索結果のアイコンをクリックします。

ハートアイコンをクリック

すると、ブラウザに以下のように表示され、クリップボードにFont Awesome用のクラスコードがコピーされます。

2015-03-28_11h20_15

コピーされたテキストを、貼り付けると、以下のようなコードが利用できます。

これを、以下のように利用すればOKです。

Font Awesomeのアイコンページからも、コードは取得することができるのですが、GlyphSearchでは以下の手順を省くことができます。

  1. アイコンをクリックしてページ遷移
  2. コードを選択してコピー

その他の検索アイコンフォントサービス

その他にも、Fontelloというサービスでもアイコンの一括検索を行うことができます。

Fontello - icon fonts generator

Fontello – icon fonts generator

こちらはどちらかというと、アイコンフォント検索してをパッケージ化するサービスです。

まとめ

こんな感じで、GlyphSearchは、これからサイトを作ろうとデザインを考えている人には、目的のアイコンを探すのに、結構便利なサイトではないかと思います。

あと、クラスコードのコピー機能も、ちょっとしたことですが、地味に便利です。