Menambahkan Ikon pada Menu atau Tab Blog

 

Blog atau Website merupakan media digital yang bergelut dalam dunia maya, terutama jurnalistik atau tulis menulis.

Didalam blog atau website tersebut berisikan berbagai macam informasi, yang dalam penyajiannya dikelompokkan dalam kategori-kategori tertentu. Nah, untuk menampilkan kategori-kategori tersebut dalam bahasa blognya adalah label), maka Admin akan menyajikan menu-menu atau tab sesuai dengan kategorinya.

Dalam penyajian menu-menu atau tab akan sangat terbantu atau lebih menarik jika menu atau tab tersebut ditambahkan dengan ikon.

Apa itu ikon ?

Ikon secara gampangnya dalah sebuah gambar kecil yang berfungsi sebagai pendeskripsi dari suatu hal.

Dan kali ini saya akan membagikan pengalaman saya dalam menambahkan ikon pada menu atau tab blog. Dalam hal ini saya menggunakan platform blogspot. Berikut langkah-langkahnya :

1. Buka akun blog kalian, masuk ke menu tema (theme), klik edit html

2. Cari kode 

</head> 

(gunakan ctrl+f)

3. Salin kode berikut tepat diatas

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

4. Kemudian cari lagi kode menu-menu atau tab blog, contoh :

<li><a href='#' title='Home'>Home</a></li>

5. Lalu sisipkan kode berikut :

<i aria-hidden='true' class='fa fa-home'></i>

Sehingga kode berubah menjadi seperti ini :

<li><a href='#' title='Home'> <i aria-hidden='true' class='fa fa-home'></i> Home</a></li>

6. Terakhir save tema.

Hasilnya seperi ini :

Nah, untuk mendapatkan banyak kode ikon, kalian kunjungi :

https://fontawesome.com/icons?d=gallery

cara mengganti ikonnya :

1. Kunjungi : https://fontawesome.com/icons?d=gallery

2. Kemudian pilih salah satu ikon yang akan digunakan.

3. Dan salinlah kode ikon nya, contoh :

<i class="fab fa-500px"></i> 

 maka ganti kode class="fab fa-500px" ke kode yang tadi disalin ke tema blog.

sebelum diganti  :

<li><a href='#' title='Home'> <i aria-hidden='true' class='fa fa-home'></i> Home</a></li>

setelah diganti :

<li><a href='#' title='Home'> <i aria-hidden='true' class='fab fa-500px'></i> Home</a></li>

Selamat mencoba.

Share :