Sering kali kita membutuhkan icon dalam proyek kita, baik untuk memberikan informasi tambahan pada landing page. Maupun untuk memperjelas makna dari action yang akan dilaksanakan pada tombol. Nah, bagi teman-teman yang membutuhkan icon yang lengkap, dengan gambar yang cantik, dan yang paling penting tentunya gratis, kita bisa menggunakan Bootstrap Icons. Pada video ini, kita akan belajar mengenai cara instalasi dan hingga akhirnya bisa menggunakan Bootstrap Icons di dalam proyek Laravel.

Kita mulai dari command prompt terlebih dahulu. Pertama kita mesti menuju ke folder tempat kita akan menyimpan proyek Laravel kita. Kebetulan pada komputer saya, saya simpan pada drive d dengan nama folder Laravel. Dari sini kita ketik perintah:

  composer create-project laravel/laravel icons

Perintah ini akan menginstall Laravel versi paling baru di folder icons. Pada saat video ini dibuat, versi Laravel adalah 12. Prosesnya mungkin agak lama ya, karena kita mesti mengunduh source code yang totalnya di sekitar 50 megabytes.

Setelah prosesnya selesai, kita bisa masuk ke folder icons dengan menggunakan perintah

  cd icons

Kemudian kita bisa buka visual studio code dengan menggunakan perintah

  code .

Yang enaknya dari perintah ini adalah kita bisa membuka visual studio code menggunakan workspace baru dan langsung menambahkan folder yang sedang kita akses pada proyek. Jadinya kita bisa langsung melihat semua source code laravel pada dalam Explorer di sebelah kiri.

Kita bisa tutup command prompt. Selanjutnya kita buka terminal di dalam visual studio code. Langkah pertama kita mesti memeriksa hasil instalasi Laravel-nya terlebih dahulu ya. Kita coba jalankan dengan perintah

  php artisan serve

Perhatikan bahwa Laravel akan dijalankan pada alamat 127.0.0.1 dengan nomor port 8000. Kita bisa tekan ctrl ditambah klik untuk membukanya pada browser. Kalau tampilan browser sudah seperti ini, artinya kita sudah berhasil meng-install Laravel.

Kita lanjutkan dengan proses instalasi icons. Kita bisa buka alamat Bootstrap Icons di icons.getbootstrap.com. Kemudian tekan bagian Install. Disini ada perintah instalasi menggunakan NPM. Kita copy perintah-nya. Kita buka terminal baru pada Visual Studio Code. Lalu kita paste perintahnya:

  npm i bootstrap-icons

Sekali lagi kita perlu menunggu proses instalasi ya. Berapa lama prosesnya bergantung dari koneksi internet teman-teman. Setelah proses instalasinya selesai, maka kita akan mendapatkan folder baru node_modules yang berisi source code bootstrap icons dan semua dependency proyek. Ukuran source code keseluruhan proyek kita akan bertambah di sekitar 50 megabyte lagi. Jadi ukuran totalnya kurang lebih 100 megabytes.

Setelah kita berhasil mengunduh source code, bukan berarti kita sudah langsung bisa menggunakan Bootstrap Icons di proyek kita. Ada yang perlu kita tambahkan terlebih dahulu. Kita buka folder resources, folder css. Kemudian pilih file app.css. Di dalamnya kita tambahkan kode:

  @import 'bootstrap-icons';

Setelah itu kita buka folder resources, folder views, dan buka file welcome.blade.php. Kita hapus seluruh isi file. Lalu kita ketik html:5 untuk mendapatkan kode boilerplate HTML versi 5. Pertama kita tambahkan dahulu kode untuk menambahkan vite pada front-end.

  @vite(['resources/css/app.css', 'resources/js/app.js'])

Kita buka kembali situs Bootstrap Icons. Dan kita pilih salah satu icon. Misalkan angka 1 yang dilingkari ini. Kemudian kita copy kode cara menggunakan icons sebagai web font. Kita paste ke dalam tag body.

Kita coba lihat di browser. Masih error ya. Hal ini disebabkan karena kita masih belum menjalankan Vite. Untuk menjalankan Vite, kita bisa buka terminal yang kedua. Lalu kita ketik

  npm run dev

Setelah itu kita refresh browser. Kalau misalkan icon yang kita pilih sudah bisa muncul di browser, artinya kita sudah berhasil melakukan instalasi Bootstrap Icons dan sudah bisa mengunakannya di dalam proyek kita.

Berhubung icons berfungsi seperti font, dan Laravel sudah otomatis menggunakan framework Tailwind, maka kita bisa menggunakan kelas untuk mengubah font untuk mengubah icon-nya. Sebagai contoh, kita gunakan kelas text-7xl untuk memperbesar ukuran icon. Pertama kita ketik .text-7xl, lalu tekan Ctrl+I untuk menggunakannya sebagai Emmet. Maka vs-code membuatkan div yang isinya kelas text-7xl. Kita pindahkan icon ke dalam div. Kalau kita refresh browser, maka sekarang kita mendapatkan icon dalam ukuran besar.

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.