Penggunaan gambar sebagai ikon memang sebagai suatu pilihan tapi kita juga harus memperhatikan kecepatan loading suatu weblog, karena dengan banyaknya ikon gambar yang ditampilkan tentu saja akan menambah beban loading weblog.
Sebagai alternatif lain selain menggunakan gambar sebagai ikon, kita bisa menggunakan font ikonik dari Font Awesome, selain banyak pilihan ikon yang bisa kita pergunakan, menggunakannya pun tidak begitu sulit dan ikon tersebut merupakan karakter font maka kita bisa modifikasi dan kustomisasi menggunakan CSS.
Menampilkan Font Awesome
Letakan sccript dibawah ini diantara tag <head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />dan Save template
Menggunakan Font Awesome
Ikon cantik dari Awesome ini kita bisa tempatkan dimana saja kita inginkan, untuk menampilkan font awesome ini menggunakan tag <i> karena sifatnya inline-block dan menambahkan class utama yaitu .fa dan class untuk memanggil ikon tertentu.
Sebagai contoh saya akan menampilkan ikon bus dari font awesome
<i class="fa fa-bus"></i>Dan hasilnya:
fa-bus
Untuk melihat contoh bentuk ikon-ikon lainnya bisa masuk pada http://fontawesome.io/icons
Merubah Ukuran Ikon
Ukuran ikon bisa kita ganti dengan menambahkan class fa-lg (berubah sebesar 33%), fa-2x, fa-3x, fa-4x, atau fa-5x. Contoh penggunaanya sebagai berikut:
<i class="fa fa-bus fa-lg"></i> fa-lg
<i class="fa fa-bus fa-2x"></i> fa-2x
<i class="fa fa-bus fa-3x"></i> fa-3x
<i class="fa fa-bus fa-4x"></i> fa-4x
<i class="fa fa-bus fa-5x"></i> fa-5xDan hasilnya:
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
Selain class yang sudah ditentukan diatas, kita bisa menambahkan css untuk mengganti warna, background atau menambah border pada ikon font awesome tersebut.
Sebagai contoh seperti ini:
.fa-bus {
color: blue;
background-color: Black;
height: 80px;
width: 80px;
padding: 10px;
text-align: center;
border-radius: 100%;
border: 4px solid blue;
}Dan hasilnya:
Menampilkan Ikon Font Awesome menggunakan CSS Content
Pseudo class before ataupun after yang dapat kita gunakan pada template blog, yang bisa kita gunakan untuk menempatkan ikon font awesome pada bagian-bagian tertentu pada bagian blog, contoh css-nya sebagai berikut:
.sidebar h2:before {
content: "\f207";
font-family: FontAwesome;
display: inline-block;
color: red;
line-height: 1em;
}Untuk listnya kalian bisa melihat pada http://fontawesome.io/cheatsheet.
Penggunaan ikon \f207 berasal dari [], atau selain menggunakan font awesome sebagai pilihan lain bisa menggunakan ikon unicode karakter sebagai ikon pada pseudo elemen.
Semoga bermanfaat.
No comments:
Terima Kasih Atas Komentar Anda
Blog Update