日本のブログでよく利用されているWEBサービスロゴのアイコンフォントまとめと利用方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

今回は、日本でよく利用されているWEBサービスのアイコンフォントファイルと、使い方をまとめてみました。

でき上がりはこんな感じのアイコンフォントになります。

背景色をつけたアイコンフォント

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

WEBサービスのアイコンフォントについて

ウェブアイコンフォントと言えば現時点ではFont Awesomeが最も使われています。

Font Awesomeには、多数のウェブアイコンフォントがあり使い勝手もとても良いです。WEBサービスのロゴアイコンも多数揃っています。

ただ、Font Awesomeは海外で制作されていることもあり、海外でよく利用されているWEBサービスロゴしかありません。

例えば、Twitter、Facebook、Google+.YouTube、Tumblrなどはあるのですが、feedly、はてブ、ポケット、LINEなど日本のブログ界隈でよく利用されているWEBサービスのロゴはありません。

こういうのは、自前でウェブアイコンフォントを作るしかありません。

僕も以前feedlyのアイコンフォントがなかったので以下のように作成しました。

自作のWEBアイコンフォントの作り方(無料ツールのみでfeedlyフォントを作る)
最近は、その便利さからWEBアイコンフォント(以下、アイコンフォント)を利用したサイトが増えています。 アイコンフォントは、CSSで色...
IconVaultでfeedlyのWEBアイコンフォントを作ってみる
前回、IcoMoonというWEBサービスを利用してfeedlyのWEBアイコンフォントを作成しました。 今回は、IcoMoon...

で先日、ドウラクを運営されているさわさわさんが、feedly、はてブ、ポケット、LINEのSVGファイルを利用自由で配布されているのを見つけました。

需要があるか分かりませんが、今回トレースしたFeedly、LINE、はてなブックマークのSVGファイルを公開しておきますので、ご自由にダウンロードして使ってください。おまけでPocketも同梱しておきました。

今回は、このSVGファイルを利用させてもらって、日本のブログ界隈でよく利用されている、WEBサービスのロゴのウェブフォントを作成し、その使い方も紹介したいと思います。

IcoMoonでアイコンフォントの作成方法

で、早速アイコンフォントを作成してみました。

feedly、はてブ、ポケット、LINEの素材ははドウラクで公開されているものを使わせてもらって、その他のものはIcoMoonに元からあるものを使用して、IcoMoonのジェネレータでウェブアイコンフォント作成しました。

作成した方法を、簡単に説明します。(IcoMoonの詳しい使い方は、全項目で紹介したリンクを参照してください)

とりあえず、IcoMoonでロゴのSVGファイルを読み込んで選択。

日本でよく使われるWEBサービスロゴ

その他のWEBサービスロゴも、日本でよく使用されてそうなものは一応選択。

その他のWEBサービスロゴ

ジェネレートフォントをクリックします。

ジェネレートフォント

SVGファイルからインポートしたアイコンフォントには名前がないので自前で名前を入力します。

アイコンフォントに名前をつける

また、アイコンをクリックすることで、図柄の回転、上下左右反転、拡大・縮小、図柄の移動をなども行います。

簡単な編集もできる

全ての設定が済んだら、「Download」ボタンを押してアイコンフォントファイルをダウンロードします。

ダウンロード

たったこれだけの作業です。IcoMoon素晴らしいです。

日本でよく使われるウェブサービスアイコンフォント

上記の方法で作成したものが以下になります。

ダウンロードボタンを押すと、「icomoon.zip」ファイルがダウンロードされます。

使用方法

これらのウェブアイコンフォントをWordpressで使用する方法を紹介します。

日本のブログなどで、よく利用されているのはTwitter、Facebook、Google+、はてなブックマーク、ポケット、LINE、feedlyが多いので、今回はそれらのロゴリストを作成してみたいと思います。

準備

まずは、ダウンロードした「icomoon.zip」ファイルを解凍して、テーマフォルダ直下に置きます。

そして、header.phpテンプレート内の<head></head>内に以下のように書いてstyle.cssファイルを呼び出します。

子テーマで利用する場合

子テーマで利用する場合は、以下のように書きます。

HTMLを記入

例えば、リストを横並びにしてアイコンフォントを並べるには以下のように書きます。

この状態のままだと、アイコンフォント通常の文字の大きさとリンク色で表示されます。

なにもスタイルを設定していない状態

スタイルを記入

あとはスタイルを整えます。

ロゴを横並びに表示

とりあえず、ロゴの色とか関係なくアイコフォントロゴを横並びに以下のように表示させてみたいと思います。

色をつけていない状態のアイコンフォント

上記のようにするには、、style.cssなどに以下のようにスタイルを書きます。

アイコンフォントに色をつける

アイコフォントそれぞれにウェブサービス特有の色をつけて以下のように表示させたいと思います。

フォント色をつけたアイコンフォント

上記のようなスタイルにするには、以下のように先程のスタイルに加えて、いくつか追記します。

スクエア型のロゴにする

通常の色付きロゴもよく見かけますが、角が丸くなっているスクエア型の以下のようなロゴもよく見かけます。

背景色をつけたアイコンフォント

このようなスタイルにするには、以下のように書きます。

まず、ウェブフォントの文字色を白色にします。加えてそれぞれpaddingをつけ、角をborder-radiusで丸みを持たせて、アンカーの背景色をそれぞれ設定することによって、スクエア型を実現します。

まとめ

こんな感じで、これまでブログなどではあまり見かけることができなかった、feedly、はてブ、ポケット、LINEのアイコンフォントを作成することができました。

これから、自作テーマを作成したり、テーマをカスタマイズしたいとき、「サービスロゴのアイコフォントが欲しい」なんて時には、この方法を試してみてください。