Untuk mengakses halaman Bootstrap Icons, kita bisa menuju ke getbootstrap.com dan memilih menu Icons. Atau kita bisa langsung mengetikkan subdomainnya, yaitu icons.getbootstrap.com. Apabila kita geser ke bawah, kita akan menemukan lebih dari 1.300 icons. Jumlah icons ini akan selalu bertambah karena tim Bootstrap tetap melakukan upgrade versi baru.

Untuk mencari icons yang sesuai dengan kebutuhan kita, kita bisa menggunakan fasilitas filter yang berada di bagian awal Icons. Misalkan kita bisa mencari icon untuk operasi Add, Edit, atau Delete database. Atau mungkin kita perlu icon untuk sosial media seperti facebook, twitter, instagram, dan lain-lain. Kita bisa melihat langsung hasil filter hanya menampilkan icon-icon yang kurang lebih sesuai dengan keyword yang kita masukkan.

Kalau misalkan kita hendak menggunakan icon Instagram, maka kita bisa klik ke icon tersebut. Nah, disini ada contoh penggunaannya. Misalkan digunakan sebagai judul, sehingga ukurannya lebih besar. Atau bisa juga digunakan dalam teks biasa, atau menjadi link. Atau bahkan bisa digunakan di dalam button.

Di sebelah kanan layar, kita bisa menemukan cara menggunakan icon ini. Cara yang paling gampangnya adalah kita tinggal copy kode HTML-nya. Disini kita mendapatkan tag SVG, singkatan dari Scaleable Vector Graphics. Disini kita bisa lihat, di dalam tag svg terdapat tag path. Path ini berisikan instruksi-instruksi untuk menggambar vector graphics, seperti tarik garis dari titik a ke titik b, gambar objek kotak, lingkaran, dan lain-lain. Kita tidak akan membahas terlalu dalam mengenai tag SVG ini, namun yang jelas apabila kode ini kita taruh di dalam HTML kita, maka kita akan mendapatkan hasil icon Instagram.

Dan kalau kita lihat kembali ke source code, yang saya gunakan adalah HTML Boilerplate tanpa memasukkan library tambahan. Saya bahkan tidak menggunakan Bootstrap sama sekali.

Kalau kita lihat lagi ke tag SVG. Disini adalah attribute width dan height. Ukuran icon bisa kita ubah sesuai kebutuhan kita. Misalkan kita ubah menjadi ukuran 500 dikali 500 pixel. Maka kita mendapatkan icon Instagram dalam ukuran besar. Yang menariknya disini adalah gambar yang dihasilkan tetap tajam dan tidak pecah. Ini adalah kelebihan dari gambar vektor.

Selain memiliki beberapa kelebihan, SVG ini juga memiliki beberapa kelemahan. Yang pertama adalah source code-nya tidak readable. Jadi kalau kita melihat kembali ke tag SVG ini, kita akan bingung sendiri. Tag SVG ini maksudnya apa sih? Kita harus menggeser terus ke samping hingga menemukan attribute class, kita lihat nilainya bi-instagram. Nah, dari nilai ini baru kita bisa tau, oh ini maksudnya icon untuk instagram. Namun proses untuk melihatnya cukup panjang ya, karena kita mesti menggeser jauh ke kanan. Untuk mempermudah proses membaca source code, kita harus membuat komentar sendiri di atas SVG. Sebagai contoh kita tuliskan Icon Instagram. Nah, dengan cara penulisan kode HTML seperti ini maka tag SVG ini menjadi lebih gampang untuk diartikan.

Kelemahan kedua adalah ukuran tag-nya yang besar. Sebagai contohnya, misalkan kita hapus dahulu tag SVG. Kita buka Developer Tools pada Chrome. Kita pilih Network dan kita refresh, maka disini kelihatan bahwa ukuran dari icons.html adalah 160 byte.

Sekarang kita paste kembali tag SVG dan kita refresh. Satu buah icon Instagram ini menyebabkan ukuran HTML kita bertambah 1,7 kb. Cukup besar ya, terutama bila kita hanya menggunakannya sebagai gambar dengan ukuran 16x16. Dan ini hanya satu icon. Apabila kita menggunakan 3 icon, maka ukuran HTML kita bisa bertambah 5kb. Penggunaan icon yang sama di tempat yang berbeda tetap menambah ukuran HTML. Dan penambahan ukuran HTML ini berarti halaman situs kita menjadi lebih lambat untuk dibuka, dan memerlukan jumlah bandwith yang lebih besar dari server kita.

Selanjutnya kita akan mencoba menggunakan Bootstrap Icon sebagai web font. Kita kembali ke getbootstrap.com dan melihat halaman icon Instagram. Di sebelah kanan ada yang berjudul Icon Font. Dibawahnya ada kode HTML yang bisa kita copy. Kita tinggal klik icon di sebelah kanannya untuk copy.

Kita kembali ke kode HTML kita. Kita hapus semua tag SVG. Lalu kita paste kode dari situs getbootstrap. Kemudian kita buka di browser. Tidak muncul apa-apa ya.

Untuk menggunakan Icon Font, ada kode yang harus kita tambahkan dahulu. Kita kembali ke getbootstrap.com. Kita buka lagi halaman Icons. Perhatikan lagi di bawahnya masih ada beberapa navigasi, salah satunya adalah Install. Kita klik Install. Dan perhatikan ada yang judulnya CDN. Untuk menggunakan icon font, kita harus menambahkan tag link ini pada tag head kita. Kita copy kode link. Dan kita tambahan di dalam tag head. Kita simpan dan refresh browser. Sekarang icon Instagram sudah bisa muncul.

Dengan cara menggunakan Bootstrap Icon sebagai Icon Font atau Web Font, kita mendapatkan beberapa keuntungan. Yang pertama adalah source code kita lebih readable. Kalau kita lihat kembali ke tag i yang diberikan, kita bisa dengan lebih mudah menangkap bahwa ini adalah icon Instagram. Bisa kita lihat dari nilai kelasnya. Dibandingkan dengan tag SVG yang tadi, tag Icon Font lebih mudah untuk dibaca dan diartikan.

Kelebihan kedua adalah icon Instagram yang kita dapatkan ini adalah Font, bukan Image. Sebagai Font, Icon akan secara otomatis mengikuti style yang sedang kita gunakan. Sebagai contoh, kita buat satu buah tag h1 dengan konten Hello World. Lalu kita copy icon Instagram ke bagian akhir judul. Kita simpan dan refresh browser. Dan sekarang kita bisa melihat bahwa ukuran icon secara otomatis membesar sesuai dengan ukuran judul.

Kita bisa mencoba mengubah beberapa properti pada judul. Kita gunakan inline CSS saja agar cepat. Misalkan kita tambahkan attribute style dengan nilai font-size:4rem. Sekarang ukuran judul semakin besar, dan ukuran icon juga secara otomatis turut membesar.

Kita coba ubah properti lain. Misalkan kita hapus font-size dan kita ganti menjadi color:red;. Sekarang warna tulisan judul berubah menjadi merah, dan icon Instagram juga mengikuti warna merah. Jadi kita bisa dengan gampang melakukan kostumisasi terhadap Icon agar sesuai dengan yang kita butuhkan.

Selain kelebihan, tentunya ada beberapa kelemahan juga untuk cara penggunaan Bootstrap Icons sebagai Web Font. Kelemahan pertama, seperti yang kita bahas barusan, cara setupnya sedikit lebih susah ya. Bagi teman-teman yang tidak memperhatikan tulisan Install, mungkin tidak tau kalau kita harus menambahkan tag link terlebih dahulu barulah kode Web Font bisa berfungsi dengan benar.

Kelemahan kedua, masih berkaitan dengan tag link ini, bandwith yang dibutuhkan untuk membuka situs kita menjadi lebih besar. Kalau kita buka kembali Developer Tools dan kita lihat bagian Network. Lalu kita lakukan Hard Refresh. Sekarang kita bisa melihat bahwa ukuran icons.html kita adalah sekitar 400 byte, namun kemudian browser harus mengambil 2 file lagi dengan ukuran total sekitar 100kb.

Mengapa ukurannya besar ya 100kb? Dibandingkan SVG yang tadinya hanya 1,7kb. Jawabannya adalah karena kita harus sekaligus include semua icons yang tersedia. Jadi walaupun kita hanya menggunakan 1 icon, kita tetap harus mengunduh seluruh 1300 icons.

Sekarang muncul pertanyaan. Lebih bagus mana? Menggunakan SVG atau Icon Font? Kalau dari penilaian saya, lebih bagus menggunakan Icon Font. Karena source code kita lebih readable dan lebih mudah untuk melakukan kostumisasi Icon. Sementara kekurangannya nanti masih bisa tertutupi oleh CDN dan cache.

Dengan menggunakan Icon Font, kita sudah bebas menggunakan icon sebanyak yang kita butuhkan. Karena setiap penambahan icon, hanya menambah ukuran HTML kita dalam jumlah kecil. Sebagai contoh, kita tambahkan satu lagi icon Instagram. Dan kalau kita refresh, kita bisa melihat bahwa ukuran HTML kita hanya bertambah sekitar 40 byte. Dan kita bisa lihat lagi bahwa kedua file yang diinclude sudah tidak memiliki size lagi, karena browser cukup mengunduh satu kali saja, selanjutnya secara otomatis menggunakan cache. Jadi kekurangan Icon Font ini hanya terjadi satu kali saja, pada saat pengunjung pertama kali membuka situs kita.

Kita buka lagi kode situs Startup kita dan kita akan mengupdate kedua button ini untuk penambahan Icon. Kita akan menggunakan cara Web Font. Jadi pertama kita tambahkan dahulu tag link di dalam tag header.

Kemudian kita buka lagi icons.bootstrap.com. Yang kita butuhkan disini adalah icon dari Google Play Store dan Apple App Store. Namun sayangnya saat ini kedua icon masih belum tersedia ya. Jadi kalau misalnya kita filter Google Play ataupun App Store, tidak ada icon yang tersedia. Kita terpaksa menggunakan icon lain.

Untuk Google Play, kita coba filter menggunakan kata kunci play. Dan kita pilih icon yang bernama play-fill. Kita copy kode Web Font-nya. Dan kita paste di awal konten button pertama. Icon play sudah muncul dan secara otomatis menyesuaikan diri dengan font yang sedang digunakan.

Untuk icon kedua kita filter dengan menggunakan kata kunci bucket. Lalu kita pilih icon bucket-fill. Dan sama seperti tadi, kita copy kode Web Font. Kita paste di awal konten button kedua. Dan sekarang kedua button kita sudah lebih menarik karena sudah ada iconnya.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.