アイコンフォントを各サイトから一括検索する便利な方法

最近では、どのブログやサイトでもアイコンフォントを利用しています。 アイコンフォントを提供しているサイトも現在ではかなりの数になり、自分が使いたいアイコンフォントを探すだけでも一苦労ですよね。

そこでアイコンフォントを探す際に、複数の提供サイトから一括検索できる便利な方法を紹介したいと思います。 まあ、方法といってもGlyphSearchというアイコンフォント検索サービスを使うだけなんですがw

GlyphSearchって何?

GlyphSearch

GlyphSearchは、アイコンフォントを提供している複数のサイトから一括で目当てのアイコンを検索できる無料WEBサービスです。 例えば次のようなサイトで提供されているアイコンを検索することができます。

GlyphSearchを使えば、上記のアイコンフォント提供サイトから一括で、検索したアイコンを探し出すことができます。 これで目的のアイコンをすぐに見つける事ができるので、是非活用してみて下さい。

それではGlyphSearchの使い方を紹介しますね。

GlyphSearchの使い方

検索フォームでアイコンを検索

まずはGlyphSearchにアクセスします。

左上に検索フォームがあるので、そこに目的のアイコンのキーワードを入力します。 ここでは、例えば「FACE book」と入力し、検索してみます。 そうすると「FACE book」に関するアイコンだけが表示されます。

Libraryの項目からサイトを選択

提供サイトごとに検索したい場合は検索フォームの下にある「Library」から、各サイトの項目をクリックします。

アイコンサイトを指定した場合の表示例

そうするとこんな感じで提供サイトごとに表示されるので、目的のデザインを探す際にはすごい便利です。

アイコンのコードを取得する

検索したアイコンをクリックすると、アイコンのHTMLコードを取得することができます。

例えば表示されたアイコンをクリックしてみて下さい。 そうすると次のような画面が表示され、そのアイコンのHTMLコードがクリップボードにコピーされています。

copied

この機能はかなり便利で、例えば「Font Awesome」なら、通常はFont Awesomeのアイコンページから目的のアイコンのコードを探しますよね。 ですがGlyphSearchを使えば、その手間を省くことが可能です。

classを選択

また「Copy」の項目の「class」を選択し、アイコンをクリックすると、そのアイコンフォントのclass名だけ取得できます。

hexを選択

Unicodeを取得したい場合は「Hex」を選択するとクリップボードにコピーされるようになります。 で取得したUnicodeを下のように記述すれば、div要素の後にアイコンが表示されます。

div:after{
  font-family: 'FontAwesome';
 content: "\f108";
}

まとめ

こんな感じでGlyphSearchは、凄まじく簡単で手軽に目当てのアイコンフォントを見つける事ができます。 サイトをデザイン、または新たに制作する時にアイコン探しっていう面倒な手間を省くことができるので、超便利な方法かと思います。

アイコンフォントをこれから使う機会があるなら、是非利用してみ下さいね(^^♪