最近は、アイコンフォントを利用しているサイトもかなり多いです。
アイコンフォントと言ったらFont Awesomeが最も有名でしょうか。その他にも、今現在多数のサイトがアイコンフォントを公開しています。
ただ、Font Awesomeだけで結構な種類のアイコンがあるのに、自分の欲しいデザインのアイコンフォントを複数のサイトから探すのは、結構大変です。
今回はそんな時に、探すのに便利なGlyphSearchというアイコンフォント検索サービスの紹介です。
photo by FontFont
目次
GlyphSearchとは
GlyphSearchは、複数のアイコンフォントサイトの中から、手軽に目的のアイコンを検索できるサービスです。
今現在、以下のアイコンフォントサイトに対応しています。
アイコンフォントって、便利なんですけど、目的のデザインのアイコンを探し出すのが結構手間なんですよね。
GlyphSearchはそんなアイコン探しの手間を軽減してくれます。入力フォームにキーワードを入力することで、一括で複数サイトから抽出することができます。
例えば、GlyphSearchで「heart（ハート）」と検索すると、以下のようにハートに関するアイコンだけが表示されます。
Facebookで検索するとこんな感じ。
Font Awesomeにはないデザインを探したいというときには便利かもしれません。
クラスコード取得に嬉しい機能
一応、それぞれのアイコンフォントサイトごとに検索ができるようにはなっています。
Font Awesomeだと、以下のような検索フォームから抽出が行えます。
なので、Font Awesomeのアイコンしか利用していない場合は、それで十分と思うかもしれません。
ただ、GlyphSearchには、アイコンフォント一括検索のほかに嬉しい機能がもう1つあります。
アイコンのクラスコードをクリップボードにコピーしてくれる
GlyphSearchで地味に便利なのが、検索結果から表示されたアイコンをクリックすると、フォントを利用するためのクラスコードをクリップボードにコピーしてくれます。
例えば、Font Awesomeの検索結果から、ハートのアイコンの利用コードを取得したかったとします。
そういった場合は、検索結果のアイコンをクリックします。
すると、ブラウザに以下のように表示され、クリップボードにFont Awesome用のクラスコードがコピーされます。
コピーされたテキストを、貼り付けると、以下のようなコードが利用できます。
fa fa-heart
これを、以下のように利用すればOKです。
<span class="fa fa-heart"></span>
Font Awesomeのアイコンページからも、コードは取得することができるのですが、GlyphSearchでは以下の手順を省くことができます。
- アイコンをクリックしてページ遷移
- コードを選択してコピー
その他のアイコンフォント検索サービス
その他にも、Fontelloというサービスでもアイコンの一括検索を行うことができます。
Fontello – icon fonts generator
こちらはどちらかというと、アイコンフォント検索してをパッケージ化するサービスです。
まとめ
こんな感じで、GlyphSearchは、これからサイトを作ろうとデザインを考えている人には、目的のアイコンを探すのに、結構便利なサイトではないかと思います。
あと、クラスコードのコピー機能も、ちょっとしたことですが、地味に便利です。
