Membuat Social Media Icon Dengan CSS

Kali ini saya akan berbagi Cara membuat Social Media Icon Dengan CSS saja. Apa sih keuntungan Membuat Social Media Icon di web hanya dengan CSS? Menurut saya sendiri loadingnya akan menjadi lebih cepat daripada membuat Social Media Icon denga gambar. Untuk cara membuatnya:
Pertama, Buat sebuah html code seperti berikut :

​<div id="f"></div>
<div id="gplus"></div>
<div id="tw"></div>

Kedua, Masukan Code CSS berikut ini :

#gplus:before {
 content: "g";
 position: absolue;
 font: 58px/29px "Palatino Linotype", Georgia, "Book Antiqua", serif;
 color: #fff;
 padding-left: 27px;
 top: 0;
 left: 0;
}
#gplus {
 position: relative;
 border-top: 12px solid #D64335; /* red */
 height: 60px;
 width: 100px;
 background-color: #393838; /* dark gray */
}
#gplus:after {
 content: "+";
 border-left: 25px solid #426AAD; /* blue */
 background-color: #32A45E; /* green */
 border-right: 25px solid #F8CA32; /* yellow */
 height: 12px;
 width: 15px;
 padding-left: 10px;
 font: 44px/55px "Palatino Linotype", Georgia, "Book Antiqua", serif;
 position: absolute;
 color: #fff;
 top: -12px;
 left: 25px;
}
#f {
    width: 100px;
    height: 80px;
    background-color: #3B5998;
    border-bottom: 20px solid #6d84b4;
    position: relative;
}
#f:before {
    position: absolute;
    top: 15px;
    right: 15px;
    border: 15px solid #fff;
    border-bottom: none;
    border-right: none;
    border-top-left-radius: 15px;
    width: 15px;
    height: 65px;
    content: "";
}
#f:after {
    position: absolute;
    top: 44px;
    left: 43px;
    height: 15px;
    width: 42px;
    background-color: #fff;
    content: "";
}
#tw:before{content: "t";}
#tw {
width:20px;
border-radius: 3px;
color: #FFF;
font-size: 55px;
letter-spacing: -1px;
margin-right: 6px;
background: none repeat scroll 0% 0% #00ACED;
padding: 10px 40px;
font-family:Georgia;
}

Demo