Cara tambahkan Icon pada title Widget menggunakan Cheatsheet Font Awesome

Cara tambahkan Icon pada Widget Title (judul) Sidebar Blogger Template ini hanya sebuah cara sederhana untuk mempercantik Template Blogger Anda agar lebih terlihat profesional. Banyak para perancang template menggunakan cara ini, seperti memberikan icon atau gambar pada sebelah kiri tulisan "Popular Post", dengan cara ini dapat membuat betah pengunjung blog.

Cara membuat Icon Widget Title :

Cara sederhana ini menggunakan Cheatsheet Font Awesome, sehingga sebagai langkah pertama kita harus memasang external link CCS font awesome, dengan cara tambahkan kode dibawah ini diatas kode </head> :

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Jika sudah terpasang selanjutnya, tinggal kita tambahkan code pada Css Template, dengan cara letakkan kode dibawah ini diatas kode ]]></b:skin> :

.widget h2{line-height:45px;position: relative;}
.widget h2:before{line-height:45px;width:45px;top:0;left:0;text-align:center;position:absolute;font-family:FontAwesome;}
.widget.PopularPosts h2{content:'\f087';}
.widget.HTML h2{content:'\f0f4';}
.widget.Label h2{content:'\f02b';}

Catatan :
Untuk contoh icon dan cara penerapan Cheatsheet Font Awesome yang lebih jelas dapat dilihat di :
https://fontawesome.com/v4.7.0/cheatsheet/