各webサービスのカラーをgenericonのアイコンに指定

CSSの方には入ってるのですが、私があまり知らないサービスのサンプルは省略しています。

Twitter

Facebook

GitHub · Build software better, together.

WordPress › 日本語

Google ←google+のカラーの方。ノーマルなgoogleのカラーは#4285f4

YouTube

Tumblr

Instagram

Dropbox

このサンプルのCSS

/* Social icons */
.genericon-github:before {          content: '\f200'; color: #171515; }
.genericon-dribbble:before {        content: '\f201'; color: #ea4c89; }
.genericon-twitter:before {         content: '\f202'; color: #00aced; }
.genericon-facebook:before {        content: '\f203'; color: #3b5998; }
.genericon-facebook-alt:before {    content: '\f204'; color: #3b5998; }
.genericon-wordpress:before {       content: '\f205'; color: #21759b; }
.genericon-googleplus:before {      content: '\f206'; color: #cc3732; }
.genericon-linkedin:before {        content: '\f207'; color: #0977b5; }
.genericon-linkedin-alt:before {    content: '\f208'; color: #0977b5; }
.genericon-pinterest:before {       content: '\f209'; color: #cc2127; }
.genericon-pinterest-alt:before {   content: '\f210'; color: #cc2127; }
.genericon-flickr:before {          content: '\f211'; }
.genericon-vimeo:before {           content: '\f212'; color: #1ab7ea; }
.genericon-youtube:before {         content: '\f213'; color: #cd201f; }
.genericon-tumblr:before {          content: '\f214'; color: #44546b; }
.genericon-instagram:before {       content: '\f215'; color: #3f729b;}
.genericon-codepen:before {         content: '\f216'; color: #000000; }
.genericon-polldaddy:before {       content: '\f217'; }
.genericon-googleplus-alt:before {  content: '\f218'; color: #cc3732; }
.genericon-path:before {            content: '\f219'; }
.genericon-skype:before {           content: '\f220'; }
.genericon-digg:before {            content: '\f221'; }
.genericon-reddit:before {          content: '\f222'; }
.genericon-stumbleupon:before {     content: '\f223'; }
.genericon-pocket:before {          content: '\f224'; }
.genericon-dropbox:before {         content: '\f225'; color: #1087dd; }

このサンプルのHTML

<p><span class="genericon genericon-twitter"></span>Twitter</p>
<p><span class="genericon genericon-facebook"></span>Facebook</p>
<p><span class="genericon genericon-github"></span>GitHub · Build software better, together.</p>
<p><span class="genericon genericon-wordpress"></span>WordPress › 日本語</p>
<p><span class="genericon genericon-googleplus-alt"></span>Google ←google+のカラーの方。ノーマルなgoogleのカラーは#4285f4</p>
<p><span class="genericon genericon-youtube"></span>YouTube</p>
<p><span class="genericon genericon-tumblr"></span>Tumblr</p>
<p><span class="genericon genericon-instagram"></span>Instagram</p>
<p><span class="genericon genericon-dropbox"></span>Dropbox</p>