Webアイコン"Genericons"を並列に並べて色を付ける

こんな事ができる

やり方

HTML

<div id="followmeblock">
      <a href="https://twitter.com/jtaka1012" target="_blank">
        <span class="twitter"></span>
       </a>
       <a href="https://plus.google.com/b/102861128808523144525/102861128808523144525/posts" target="_blank">
        <span class="googleplus"></span>
      </a>
      <a href="http://simple-gadget-life.com/feed">
        <span class="feed"></span>
      </a>
</div>

CSS

div#followmeblock a:link { color: #aaaaaa; }
div#followmeblock a:visited { color: #aaaaaa; }

div#followmeblock .twitter:before{
    content: '\f202';
    font: normal 40px Genericons;
    top:3px;
    margin-right: 5px;
    position: relative;
}

div#followmeblock a:hover .twitter:before {color: #00acee;}
div#followmeblock a:active .twitter:before {color: #00acee;}


div#followmeblock .googleplus:before {
    content: '\f206';
    font: normal 40px Genericons;
    top:3px;
    margin-right: 5px;
    position: relative;
}

div#followmeblock a:hover .googleplus:before {color: #dd4b39;}
div#followmeblock a:active .googleplus:before {color: #dd4b39;}

div#followmeblock .feed:before {
    content: '\f413';
    font: normal 40px Genericons;
    top:3px;
    margin-right: 5px;
    position: relative;
}

div#followmeblock a:hover .feed:before {color: #fcd20b;}
div#followmeblock a:active .feed:before {color: #fcd20b;}

HTMLでウェブアイコンのクラスを指定する際、divではなくspanを使う事。改行を防げる。

CSSの定義ではdivとクラス名、aタグ定義の部分にスペースを入れ忘れないようにすること。 divの入れ子構造になっていても、上記の定義で問題ない。この場合、div="followmeblock"の命令が優先される。上位のdivの名前は書く必要はない。

ちなみに、SNSサイトなどの基調色は以下のサイトで調べられる。

BrandColors: a collection of major brand color codes
#fcd20b ...