Free Icon Fonts Hosting Service by We Love Icon Fonts

Read it CSS social buttons and what do you think? Itulah salah satu artikel tutorial membuat tombol sosial menggunakan variabel CSS. Tetapi disana masih mengikutsertakan penggunaan image dalam menampilkan icon! Sekarang bagaimana cara membuat icon set dengan teknik menggunakan font? Trick membuat ikon memakai open-source fonts layaknya layanan google web fonts tentunya harus ada host service yang mendukung file fonts. Tenang saja sob, gratisan, tinggal comot, pasang di blog, jadi deh kita punya icon set keren b-)

Free services (BETA) ditawarkan oleh we love icon fonts This is a free & open source icon fonts hosting service (like Google Web Fonts, but icon fonts only). Web layanan tersebut masih beta karena masih dalam perkembangan disana-sini agar di waktu mendatang bisa langsung klop segalanya :d Berikut beberapa nama jenis font yg sudah tersedia: Brandico, entypo, Font Awesome, Fontelico, Maki, OpenWeb Icons, Typicons, and zocial. Nama² jenis font itu layaknya kategori/jenis huruf. Varian sudah pasti mentok pada yg sudah tersedia. Begini cara memasang ke blog kita...

Cari kode <b:skin> pada template, tepat sesudah <b:skin> masukan rumusan berikut

@import url(http://weloveiconfonts.com/api/?family=zocial);
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif, arial;
  color: #fff;
  font-size: 29px;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

Warna, ukuran font silahkan atur² menurut kesukaan, dan hiasilah dengan atribut CSS lain jika paham ;)
Markup HTML
<!-- Single Element -->
<span class="zocial-BLABLA"></span><!-- Group of Elements -->
<ul>
<li class="zocial-BLABLA"></li>
<li class="zocial-BLABLA"></li>
<li class="zocial-BLABLA"></li>
<li class="zocial-BLABLA"></li>
<li class="zocial-BLABLA"></li>
</ul>

Isikan BLABLA dengan cara mengklik (icon-fonts) pada web sumber!
DEMO

Rumusan penulisan CSS DEMO

/* KODE CSS */

@import url(http://weloveiconfonts.com/api/?family=zocial);
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
  color: #cccbf0;
  font-size: 25px;
  margin-right: 3px;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

/* MARKUP HTML */

<span class="zocial-dribbble"></span>  
<span class="zocial-twitter"></span> 
<span class="zocial-appstore"></span> 
<span class="zocial-flickr"></span>  
<span class="zocial-lastfm"></span> 
<span class="zocial-meetup"></span> 
<span class="zocial-reddit"></span>
<span class="zocial-googleplus"></span> 
<span class="zocial-facebook"></span> 
<span class="zocial-github"></span>
<span class="zocial-youtube"></span> 
<span class="zocial-blogger"></span> 
<span class="zocial-wordpress"></span>
<span class="zocial-instagram"></span> 
<span class="zocial-pinterest"></span>

Happy blogging \m/