Make Share Links use Weloveiconfonts

Sudah membaca artikel mengenai we love icon fonts, jika belum harap dibaca dalu free icon fonts hosting service. Acara sekarang yakni menyambung tutorial membuat icon set dengan menggunakan embed fonts, dengan isi program bikin links share pakai weloveiconfonts ;)
Penjelasan singkat dan membingungkannya begini...yuk membuat link berbagi pakai teknik @import rule dalam CSS.

@import url(http://weloveiconfonts.com/api/?family=zocial);
[class*="zocial-"]:before {
  color: white;
  font-size: 30px;
  font-family: 'zocial', sans-serif;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
#iconoscss {
  margin: 0em auto;
  text-align: center;
}
iconos {
  width: 50px;
  height: 50px;
  margin: 5px 0;
  cursor: pointer;
  line-height: 3.5em;
  position: relative;
  border-radius: 1em;
  display: inline-block;
  border: 2px solid #000;
  box-shadow: 0 10px 15px #7A7B7A; 
  transition: all .3s linear;
  transform: perspective(30em) rotateX_(60deg);
}
iconos:hover {
  box-shadow: none; 
  transform: perspective(30em) rotateX_(0deg);
}

Kode rotateX_(60deg); dan rotateX_(0deg); tidak memakai garis bawah _ bentrok dengan emoticon :d Untuk mengfix variabel CSS3 terhadap browse bisa pakek tools prefixMyCSS and CSSPrefixer or Nettuts+ Prefixr.

Planing HTML<div id="iconoscss">
<a href="YOUR LINK"><iconos style="background:#2BB4E1;" class="zocial-twitter" title="YOUR TITLE"></iconos></a>
<a href="YOUR LINK" title="YOUR TITLE"><iconos style="background:#D94A39;" class="zocial-google"></iconos></a>
<a href="YOUR LINK" title="YOUR TITLE"><iconos style="background:#3B5998;" class="zocial-facebook"></iconos></a>
<a href="YOUR LINK" title="YOUR TITLE"><iconos style="background:#FE6602;" class="zocial-blogger"></iconos></a>
<a href="YOUR LINK" title="YOUR TITLE"><iconos style="background:#CA2126;" class="zocial-pinterest"></iconos></a>
<a href="YOUR LINK" title="YOUR TITLE"><iconos style="background:#FE9900;" class="zocial-rss"></iconos></a>
</div>DEMO

http://jsbin.com/asahiy

Source by: redeando
Happy coding \m/