Pada pertemuan ini sebetulnya tidak jauh berbeda dengan pembahasan sebelumnya. Iya, kita masih berbicara tentang menu navigasi utama. Bedanya, kita akan menambahkan icon agar menu terlihat tidak monoton. Selain itu, kehadiran icon seperti ini juga menambah nilai estetika sebuah website.
Namun icon yang dibahas ini tidak menggunakan sesuatu yang paling populer.
Betul, dalam dunia desain web kita mengenal Font Awesome. Tampilannya menyerupai logo atau icon standar. Icon ini biasanya digunakan untuk menghiasi antarmuka grafis sebuah website. Misalnya kita temui pada menu navigasi utama, bottombar atau footer.
Nah, dalam hal ini icon Bootstrap juga mempunyai fungsi yang sama. Cara menggunakannya cukup dengan menyisipkan kode sama seperti Font Awesome. Hanya saja, baris kode untuk setiap icon tentu saja berbeda-beda. Hal ini sesuai dengan ketentuan sebagaimana terlihat pada laman Bootstrap Icons.
Untuk itu, berikut ini persembahan bagi teman-teman yang sedang belajar desain web secara otodidak.
Theme Blogger Bootstrap (5); Menambahkan Icon Bootstrap
Sebelumnya, silahkan buat theme sendiri dari nol bagi yang belum memiliki. Terutama bagi teman-teman yang baru saja terdampar di sini. Dan bagi teman-teman yang terlewat langkah sebelumnya juga bisa merujuk ke sana.
Setelah itu, ikuti tahapan berikut tentang cara menambahkan icon pada menu navigasi utama.
1. Kunjungi laman Bootstrap Icons.
2. Cari icon yang diinginkan satu per satu atau dengan cara lainnya yaitu mengetikan kata kunci di kolom pencarian icon.
3. Klik icon yang diinginkan.
4. Di sana terlihat ada beragam cara yang disuguhkan.
5. Dalam hal ini perhatikan baris kode pada bagian "Icon font".
6. Silahkan klik simbol yang ditunjukan pada gambar di bawah ini untuk menyalin kode icon.
7. Selanjutnya login ke dashboard Blogger.
8. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".
9. Cari baris kode menu navigasi utama yang kemarin kita paste.
10. Klik kanan dan pilih paste pada area yang diinginkan.
11. Ingat, baris kode icon dari Bootstrap silahkan tempatkan diantara tag <li><a href> dan tag </a></li>
12. Oia, tambahkan juga tag link yang menuju server CDN untuk layanan icons dari Bootstrap. Baris kode di bawah ini pastikan sudah diletakan diantara tag <head> dan </head>
<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css' rel='stylesheet'/> 13. Adapun contoh penerapan baris kode dari Bootstrap Icons bisa copas kode menu navigasi di bawah ini yang sudah disertai dengan icon dari Bootstrap.
14. Hasil yang terlihat setelah ditambahkan icon bisa lihat gambar paling atas. Adapun gambar di bawahnya adalah menu navigasi utama yang belum diberi icon dari Bootstrap.
15. Dan bagi teman-teman yang ingin download theme pelajaran kita sampai hari ini. Yakni theme blogger sendiri dari nol disertai menu navigasi utama plus icon dari Bootstrap silahkan download di sini.
Sekian artikel berseri kita kali ini tentang cara menambahkan icon dari Bootstrap. Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar