developer向け、プログラミング関連のロゴ・アイコンを集めたフォントCSS「Devicon」

 開発者向けのサイトを作るとき、ロゴをところどころから集めるのは大変です。imgはアップロードする手間も掛かりますし、なかなか目当てのロゴが見つからないこともあります。

 今回ご紹介する、「Devicon」は、そんな悩みを一掃してくれるCSSかもしれません。

スポンサーリンク
rectangle

Devicon

 Deviconは、あらゆる開発者向けのプログラミング言語、フレームワーク、ソフトウェア、サービスなどのロゴを集めたフォントCSSです。アイコンをクリックすれば、誰でも簡単に自分のサイトにロゴを表示させることができます。

試してみる

 Deviconを開くと、右側にロゴのリストがずらりと並びます。「Search for icons」欄で、検索もできるようです。試しに、「javascript」と検索して、アイコンをクリックしてみましょう。

 左側に、「Font versions」と、「SVG versions」という欄が出てきます。基本的には、ここに表示されるコードをコピーして、表示したい場所に貼り付ければOKです。

Font versions

 「Font versions」を選択した場合は、CSSをヘッダーで読み込む必要がありますが、CDNが用意されていますので、サーバーへの負担は最小限に抑えられます。

 フォントファイル自体のサイズは166kbと大きいのですが、ブラウザキャッシュが効きますので、複数のページで利用する場合はお勧めです。

 しかし、フォントのため単一色での表現となり、次で紹介するSVG versionsより表現力は劣ります。

SVG versions

 反面、「SVG versions」は、CSSを読み込む必要がなく、手軽に単独で描画できますが、SVGの要素すべてが文字列に含まれているため、貼り付けた分だけ通信が増大してしまいます。

 SVGによる繊細な描画により、複数の色を使った表現力のある表示ができます。単一ページでしか使わない場合や、ごく少数のロゴを掲載する場合、見た目を重視する場合は、こちらを選択しても良いかもしれません。

ライセンス

 ライセンスは、MITライセンスです。説明は割愛させて頂きますが、比較的自由度の高いライセンスで、誰でも無料で制限なく使えます。詳しい条項については、リンク先をお読みください。

まとめ

 Web開発者のポートフォリオや、言語、フレームワーク、サービスなどの紹介記事などに使用できるロゴです。非常に簡単に使用できますので、Webページを彩る軽いアクセントとして使えたり、様々な用途に使えます!

 逆に、開発者以外には馴染みがありませんが……。ロゴを求めて彷徨う必要がなくなるのはうれしいですね!