Merubah Warna, Ukuran, Background Awesome Font

Custom Awesome Font - Hari ini sepertinya mau posting banyak-banyak. Seperti kita tahu semua, untuk membuat icon sekarang tidak perlu susah payah dengan image, kita bisa memanfaatkan awesome font / awesome icon. (Baca: Menggunakan Awesome Icon di Blogspot).

Nah, disana sudah dibahas coding standart untuk menentukan ukuran icon, memutar icon, flip icon dan lain-lain. Tapi sebenarnya kita bisa menambahkan kode CSS Custom untuk mengatur awesome ikon sesuai keinginan kita.

Misalkan kita mencoba mengubah awesome icon Facebook, yang kodenya:
<i class="icon-facebook"></i> 
Nah, kita bisa menambahkan CSS custom dengan selector .icon-facebook
Contoh kode css nya adalah: (Di tambahkan di atas ]]></b:skin>

.icon-facebook {  background: #FF0000;  border-radius: 100px;  color: #FFFFFF;  font-size: 25px;  padding: 2px 10px; }

*background untuk menentukan warna latar
*border-radius untuk membuat background berbentuk lingkaran. Effectnya icon berada di atas lingkaran.
*color untuk menentukan warna awesome icon
*font-size untuk menentukan ukuran awesome icon
*padding untuk menentukan jarak awesome icon dari tepi background

Kita juga bisa menambahkan CSS Custom agar tampilan icon berubah saat disorot mouse. Kita menggunakan selector .icon-facebook:hover Contoh kodenya adalah:

.icon-facebook:hover { background: #000;font-size: 40px;}

Maka ketika disorot otomatis background awesome icon akan berubah menjadi hitam. Bisa juga ditambahkan css-css yang lain, seperti text-shadow. Contoh hasilnya seperti berikut ini, coba disorot: