Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/attlabo-ssl/web/buchiko-web.com/wp-content/plugins/all-in-one-seo-pack/modules/aioseop_opengraph.php on line 844
超便利!アイコンフォントを一括検索できる「GlyphSearch」のご紹介 | ぶちろぐ

アラサー主婦のWEBデザイン奮闘記

Webデザイン Web制作 制作お役立ち

超便利!アイコンフォントを一括検索できる「GlyphSearch」のご紹介

投稿日:2018-10-24 更新日:

Webサイト制作では、出番の多いアイコン。

私は以前まで画像のアイコン素材を使用していましたが、その存在を知ってからはアイコンフォントに頼りっぱなしです

まずアイコンフォントについて簡単に説明すると、「アイコンを扱えるWEBフォント」のことで、

  • ベクターデータなのでアイコンを拡大してもぼやけない
  • 画像を使うよりもページを軽くできる
  • CSSでサイズや色を簡単に変更することができる

などといったメリットがあります。

 

アイコンフォントと言えば、Font Awesomeが有名だと思いますが、その他にもたくさんのサイトがアイコンフォントを提供しています。

私はFont Awesomeでお目当てのアイコンが見つからなかった時は、他のサイトも巡って探していましたが、各サイト大量のアイコンがあるのでけっこう大変なんですよね…。

そんな時、GlyphSearchという複数のサイトからアイコンフォントを一括検索してくれるサイトを発見!これが超便利でした。

ではこれからGlyphSearchについて詳しくご紹介していきますね。

 

GlyphSearchの機能と使い方

現在GlyphSearchで横断検索できるサイトは、以下の7つです。

  • Font Awesome
  • Foundation
  • Glyphicons
  • IcoMoon
  • Ionicons
  • Material Design
  • Octicons

会員登録不要、完全無料で利用できます。

使い方は、欲しいアイコンに当てはまるようなキーワードを入力して、検索するだけ。すると該当するアイコンが各サイトごとに表示されます。

また右側のLibraryのリストを利用すると、どれか1つのサイトに絞って検索、または結果を表示することができます。

そしてさらに便利な機能がもう1つ。検索結果のアイコンをクリックすると、そのアイコンのコードをコピーしてくれます。これで、元サイトまで行ってコードを取得する手間も省けますね。

 

まとめ

いかがでしたか?

GlyphSearchを使えば、便利なアイコンフォントをより快適に使えるようになると思います。

今までアイコン探しに苦労してたよっていう方、よければ参考にしてみてください。

-Webデザイン, Web制作, 制作お役立ち

執筆者:


comment

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

関連記事

ロゴの背景を簡単に透明にできる「画像透過ツール」

今回は、PhotoshopやIllustratorなどのソフトを使わずに、ブラウザで簡単にロゴの背景を透過することができる「画像透過ツール」をご紹介します。   「画像透過ツール」の使い方 …

ロゴ制作の際に参考になる記事【ヒアリング〜制作の流れ編】

今回はロゴ制作において参考になる記事を2つご紹介したいと思います。 私自身、まだロゴの制作はしたことがないのですが、今後担当した時のため、どのような流れでロゴ制作が行われるのか、クライアントに満足して …

Adobe Typekitのフォントが同期されなくなった時の対処法

AdobeのCreative Cloudを契約していると使える「Typekit」。 様々なタイプのフォントを自分のPCに同期させてPhotoshopやIllustrator等で使うことができるのでとて …

【Illustrator】文字をアウトライン化せずに、オブジェクトの中央に揃える方法

文字をアウトライン化せずに、オブジェクトの中央に揃える方法を今更ながら覚えました。 通常だと、入力した文字の下に余白ができてしまってきっちり真ん中に揃えられないんですよね。 ↓こんな感じ…。 &nbs …

OGP画像シュミレータ「og:image Simulator」のご紹介

Webページをシェアした時にFacebook上で表示されるOGP画像ですが、きちんと設定をしないと画像が見切れてしまったり、正方形になってしまったりしますよね。。 そんな悩みを解決する便利なサービスを …