Cara Menambahkan Icon Pada Menu atau Tulisan di Blogger

Cara Menambahkan Icon Pada Menu atau Tulisan di Blogger - Mungkin sudah sering kita jumpai berbagai situs blog utamanya dengan platform blo...

Cara Menambahkan Icon Pada Menu atau Tulisan di Blogger - Mungkin sudah sering kita jumpai berbagai situs blog utamanya dengan platform blogger yang menggunakan icon atau gambar pada menu, widget, tulisan, link, dan lain-lain yang biasanya untuk melengkapi simbol dari tulisan.

Manfaat dari memasang icon atau gambar itu sendiri adalah sebagai simbol dan dapat juga digunakan untuk mempercantik tampilan. Dengan adanya icon tersebut kemungkinan akan memudahkan pembaca dalam memahaminya.

Maka dari itu pada kesempatan ini saya akan berbagi mengenai cara memasangnya atau membuat dan menambahkan gambar berupa icon di Blog. Simak berikut ini tutorialnya!.

Cara Menambahkan Icon/Gambar di Samping Menu atau Tulisan pada Blog

Icon yang akan kita pasang nantinya saya ambilkan dari salah satu penyedia icon untuk web yang sangat populer yaitu FontAwesome, terdapat banyak pilihan disana nantinya yang dapat sobat sesuaikan sendiri.

1. Masuk ke Blogger lalu pilih "Template".
2. Klik "Edit HTML" kemudian cari kode "</head>.
3. Masukan kode copas script dibawah ini dan letakan sebelum kode </head>.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

4. Simpan template terlebih dahulu.
5. Silahkan sobat cari kode menu atau link yang akan ditambahkan icon, misal:

<a href="#">Android</a>

maka tambahkan  kode dibawah dan letakan sebelum tilisan "Android".

<i class="fa fa-android"</i>

setelah itu akan menjadi seperti ini.

<a href="#"><i class="fa fa-android"</i> Android</a>

Hasil akhirnya kira-kira akan seperti berikut:

Android

Jika ingin menyesuaikan ukuranya silahkan tambahkan kode "fa-lg, fa-2x, hinggal fa-5x" seperti berikut.

<i class="fa fa-Android fa-lg"></i> contoh ditambah fa-lg
<i class="fa fa-Android fa-2x"></i> contoh ditambah fa-2x
<i class="fa fa-Android fa-3x"></i> contoh ditambah fa-3x
<i class="fa fa-Android fa-4x"></i> contoh ditambah fa-4x
<i class="fa fa-Android fa-5x"></i> contoh ditambah fa-5x

Dan hasil jadinya akan seperti berikut mulai dari atas "fa-lg sampai dengan paling bawah fa-5x".

Android

Android

Android

Android

Android

Sobat bisa mengganti iconya untuk menyesuaikan dengan melihat list FA Icon pada laman ini (http://fontawesome.io/icons/)

Mungkin hanya ini dulu yang dapat sampaikan kali ini. Mohon maaf apabila ada kekurangnya dan jika ada yang kurang jelas atau memiliki kesulitan dalam mepraktikan bisa sobat tanyakan pada kolom komentar dibawah. Terimakasih.