Cara Menambahkan Icon di Menu Bar Website

Ada beberapa cara agar tampilan website terlihat lebih indah dari biasanya, salah satunya dengan cara menambahkan icon di menu bar pada website agar tampilan enak di lihat oleh pengunjung website, terutama saat di akses melalui komputer/laptop.

Ada banyak jenis icon vector yang dapat digunakan untuk menambahkan icon di menu bar, namun yang paling sering digunakan oleh developer website dan juga para blogger kebanyakan ialah menggunakan Font Awesome. Font Awesome sendiri sangat rajin untuk meng update icon-icon terbarunya.

Cara Menambahkan Icon di Menu Bar Website

Pada umumnya script pemanggilan Font Awesome sudah tersedia di template terbaru, baik yang free ataupun premium. Namun mungkin saja ada icon yang belum bisa ditampilkan di website atau blog kalian. Hal seperti ini bisa saja terjadi karena script pemanggilan vector font awesome belum tersedia di versi font awesome yang kalian gunakan saat ini.

Untuk mengatasinya, kalian bisa mengupdate pemanggilan font awesome versi terbaru atau yang support icon yang akan kalian panggil. Tenang saja, pada artikel yang kalian baca ini, saya akan buatkan tutorial cara menambahkan icon di menu bar pada website wordpress dan blogspot. Berikut langkah-langkahnya.

Cara Menambahkan Icon di Menu Navbar Pada Wordpress

Untuk menambahkan icon di menu bar pada website atau blog yang menggunakan platform wordpress, berikut ini langkah-langkahnya:

1. Pastikan kalian sudah masuk ke dashboard website kamu

2. Bila sudah masuk, selanjutnya pilih Appearance > pilih Menus

3. Di bagian Menu Structure, pilih terlebih dahulu menu mana yang ingin ditambahkan icon. Disini saya memilih menu Beranda untuk menampilkan icon home

4. Kemudian di bagian Navigation Label masukan script berikut tepat sebelum tulisan Beranda <i class="fa fa-home"></i>. Sehingga menghasilkan scrtipnya seperti berikut <i class="fa fa-home"></i> Beranda atau seperti gambar di bawah ini 
Menambahkan Icon di Menu Bar website pada wordpress

5. Jika sudah jangan lupa klik Simpan Menu, dan lihatlah hasilnya
Menampilkan Icon di Menu Navbar pada wordpress

Cara Menambahkan Icon di Menu Navbar pada Blogspot

Untuk menambahkan icon di menu bar pada website atau blog yang menggunakan platform blogspot, berikut ini langkah-langkahnya:

1. Login ke blogger.com kalian

2. Kemudian pilih Tema > lalu tekan Edit HTML

3. Kemudian cari letak navigasi header kalian (Sesuaikan dengan template yang kamu gunakan)

4. Sebagai contoh saya akan menampilkan icon facebook di menu Sosial Media. Maka saya akan menambahkan script pemanggilan font awesome facebook <i class="fa fa-facebook"></i> tepat sebelum tulisan Sosial Media. Sehingga akan nampak seperti gambar di bawah ini. 
Menambahkan Icon di Menu Bar website pada blogspot

5. Jika sudah jangan lupa klik Simpan Tema, dan silahkan lihat hasilnya.
Menambahkan Icon di Menu Header website
Untuk mendapatkan pilihan icon yang begitu banyak, silahkan klik icon font awesome 4.7.0 tinggal kalian sesuaikan saja pada kategori/label pada menu bar website kalian. Demikianlah artikel mengenai cara menambahkan icon di menu bar pada website wordpress dan blogspot. Cukup mudah bukan? Selamat mencoba yah.

Belum ada Komentar untuk "Cara Menambahkan Icon di Menu Bar Website"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel