ITサービス系のソーシャルアイコンを作るなら「Perfect Icons」、大抵のロゴならあります※

Perfect Iconsというサービスで、ソーシャルアイコンを自由にカスタマイズして作ることができます。

IT系のサービスなら、たいていのロゴは網羅されているのではないかと思います。こんな感じに。

僕はこれまで、こういったソーシャルアイコンは、Font AwesomeにあるBrand Iconsのウェブアイコンフォント使用してきました。Font Awesomeのアイコンフォントも比較的手軽に設置はできますが、Perfect Iconsは、アイコンの「大きさ」「角丸め」「アイコン間のスペース」「アイコン色」「ホバー時のエフェクト」などを自分好みにカスタマイズして利用することができます。

ただし残念ながら、なぜだかfeedlyのアイコンはありません。上の画像のfeedlyっぽいアイコンは、日本でのサービス利用が現在準備中の音楽ストリーミング配信サービス「Spotify」のものです。

今回はそんな「Perfect Icons」の使用方法を紹介します。

Perfect Icons

Perfect Iconsは、以下のように1ページ内でアイコン作成まで完結できるソーシャルアイコン作成ツールです。

インターフェースはこんな感じです。

作成の手順としては、こんな感じです。

利用したいアイコンを「Add Icons」から選択する
アイコンの大きさや形、色を入力してカスタマイズする
個別のSNSのURLを入力する
アイコンファイルをダウンロードする
CSSとHTMLを編集して設置する

利用したいアイコンを「Add Icons」から選択する

画面下の「Add Icons」ボタンをクリックします。

するとこれだけの中からアイコンが選べます。

選択していくと、こんな感じで、有名どころからマイナーなものまで、いろいろなロゴマークを選択できます。※feedlyは無い

アイコンの大きさや形、色を入力してカスタマイズする

スライドバーなどを調節したり、色を入力したり、マウスホバー時のエフェクトを選択します。

このようにカスタマイズすることもできます。

個別のSNSのURLを入力する

あとは、自分のSNSページのURLを入力していきます。

アイコンファイルをダウンロードする

「socicon.zip」をクリックしてソーシャルアイコンファイルをダウンロードします。

ダウンロードしたファイルは「socicon」というフォルダに解凍します。フォルダ名は好きなものにしてOKです。

「socicon」フォルダ直下に以下の4つのファイルが来るようにします。

socicon.eot
socicon.woff
socicon.ttf
socicon.svg

CSSとHTMLを編集して設置する

作業フォルダ内に「socicon」を移動させて、以下のような構成でCSSファイルとHTMLファイルを作成します。

CSSの取得

もう既にCSSの設定ファイルができているのでコピーします。

それを先程作成したスタイルシートに貼り付けます。

あとはエディターの置換機能か何かで「PATH_TO」を「ソーシャルアイコンファイルがある場所（今回はsocicon）」に全て変換します。

HTMLの編集

HTMLの設置をするために、生成されたHTMLをコピーします。

それをHTMLファイルに貼り付けてやります。

最後に、CSSファイルを以下のように呼び出すとソーシャルアイコンを手軽に設置できます。

<link rel="stylesheet" href="sample.css">

ブラウザで、以下のように設定通りに表示されればOKです。

HTML全体だとこんな感じ。

<html>
<head>
    <title>サンプル</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>

<ul class="soc">
    <li><a class="soc-dribbble" href="#"></a></li>
    <li><a class="soc-blogger" href="#"></a></li>
    <li><a class="soc-apple" href="#"></a></li>
    <li><a class="soc-delicious" href="#"></a></li>
    <li><a class="soc-xbox" href="#"></a></li>
    <li><a class="soc-tripadvisor" href="#"></a></li>
    <li><a class="soc-linkedin" href="#"></a></li>
    <li><a class="soc-pinterest" href="#"></a></li>
    <li><a class="soc-zynga" href="#"></a></li>
    <li><a class="soc-instagram" href="#"></a></li>
    <li><a class="soc-500px" href="#"></a></li>
    <li><a class="soc-yelp soc-icon-last" href="#"></a></li>
</ul>

</body>
</html>