.jpeg)
Hai semuanya, pada kali ini saya akan memberikan tutorial cara menggunakan Icon Bootstrap. Pada artikel sebelumnya, kita sudah membahas Pengertian Bootstrap. Banyak orang yang sudah mengetahui Bootstrap dan kegunaan nya. Salah satu kegunaan bootstrap yang paling diketahui oleh banyak orang adalah agar sebuah website menjadi responsive ( dapat menyesuaikan ). Selain menjadikan responsive, banyak juga orang yang menggunakan bootstrap karena dapat lebih mudah dan mempersingkat waktu dalam pembuatan website.
Namun, sekarang Bootstrap sudah meluncurkan fitur terbaru, yaitu menambahkan icon bootstrap. Tujuan ditambahkan nya icon adalah agar dapat memperbagus tampilan website yang dibuat menggunakan bootstrap. Bagaimana cara menggunakan icon bootstrap ? Berikut ini adalah caranya.
1. Kunjungi website resmi icon bootstrap, yaitu https://icons.getbootstrap.com/
2. Kemudian kamu pilih icon yang akan kamu gunakan. Contoh dibawah ini
.png)
3. Contoh saya memilih icon WiFi. Nah untuk cara penggunaan nya itu bisa berbagai macam. Yang pertama adalah dengan cara mendownload file SVG. Yang kedua, kita harus menginport CDN dari Icon Bootstrap tersebut ( nanti kita pelajari bersama ). Dan yang ketiga kita cukup menyalin codingan SVG nya dan menempelkan codingan nya ke website yang kita inginkan.
.png)
4. Sekarang kita akan membahas satu per satu.
5.1.A Pertama kita download file SVG yang tadi, contoh diatas saya memilihi icon wifi.
.png)
Sebenarnya gambar icon nya kecil, sengaja saya perbesar agar lebih jelas.
5.1.B Setelah berhasil di buka di browser, kita lihat isi codingan dari file nya. Bagaimana caranya ? Jika kamu menggunakan laptop, kamu bisa klik Ctrl + U. Dan jika kamu menggunakan handphone, kamu ketik view-source: di depan alamat URL nya. Jika masih bingung, kamu bisa lihat URL foto dibawah ini.
.png)
5.1.C Setelah codingan nya muncul, tinggal kamu salin dan tempel ke codingan milikmu.
Sekarang kita bahas cara yang kedua, yaitu dengan cara import CDN dari Icon Bootstrap
5.2.A Codingan CDN Icon Bootstrap nya bisa kamu letakkan di dalam tag <head>. Berikut ini adalah codingan CDN nya.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
5.2.B Jika sudah meletakkan codingan CDN nya di dalam tag <head>, Sekarang kita bisa langsung menggunakan icon nya. Contoh nya seperti dibawah ini
5.2.C Yang ketiga caranya sama seperti yang pertama, yaitu hanya menyalin codingan SVG nya dan menempel nya ke codingan milikmu.
Sekian artikel yang dapat saya berikan, sekian dan terimakasih.