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:
Nah, kita bisa menambahkan CSS custom dengan selector .icon-facebook
Contoh kodenya adalah: - Di tambahkan di atas ]]></b:skin>
*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:
maka ketika disorot otomatis background awesome icon akan berubah menjadi hitam. Bisa juga ditambahkan css-css yang lain, seperti text-shadow.
http://farrayroom.blogspot.com/2013/08/merubah-warna-ukuran-background-awesome.html
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 kodenya 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.
http://farrayroom.blogspot.com/2013/08/merubah-warna-ukuran-background-awesome.html
Tambahkan komentar Komentator
Konversi KodeOOT