Glyphicon adalah icon-icon yang siap dipakai pada website jika kita memakai framework CSS yaitu Bootstrap. Bootstrap menyediakan fasilitas untuk membuat atau menampilkan icon dengan sangat mudah, ada sangat banyak icon yang disediakan oleh bootstrap, masing-masing sudah diberi nama dan kita hanya perlu memanggil nama class nya masing-masing untuk menampilkan icon bootstrap yang diinginkan.
Icon hati:
Icon hati di atas tombol: Search
Icon Print:
Icon Print di atas tombol besar ["btn-lg"]: Print
Hasilnya :
Pada contoh di atas bahwa icon glyphicon bootstrap dapat ditambahkan pada semua element html, seperti tombol, link dan lainnya, ukuran icon glyphicon bootstrap ini mengikuti ukuran font.
Untuk bootstrap terbaru glyphicon sudah tidak disertakan lagi, walaupun sudah tidak disertakan gluphicon tetap masih bisa kita gunakan.
Pada bootstrap versi terbaru glyphicon sudah tergantikan dengan Bootstrap Icons, kita bisa download dan pelajri di link berikut ini //getbootstrap.com/
Referensi :
Masih dengan pengalaman belajar desain web meskipun belum masuk kelas premium. Berikut ini tulisan lanjutan tentang cara install bootstrap secara offline. Kali ini saya akan belajar memasukan kode bootstrap kedalam file htm atau file html.
Bagi yang belum tahu, file htm atau html adalah jenis file halaman web standar di internet. Halaman inilah yang menjadi project kita dalam belajar desain web.
Adapun tool yang digunakan seperti biasa yaitu Visual Studio Code. Untuk itu, bagi yang terlewat silahkan install terlebih dahulu via Microsoft Store atau installer. Dan bagi teman-teman pengguna Linux juga bisa install vscode.
Langsung saja, berikut ini pengalaman belajar saya tentang cara input kode bootstrap secara offline.
Cara memasukan kode bootstrap secara offline bisa dilakukan dengan beragam tool. Namun untuk artikel kali ini kita mencoba VSCode. Karena saya lihat dari para mentor juga menggunakan Visual Studio Code.
Terlebih lagi tool ini memiliki kemampuan yang bisa diperluas dengan extension. Salah satunya adalah live server untuk melihat preview pada browser. Untuk itu, agar bisa mengikuti tutorial ini disarankan sudah install live server pada vscode.
Begitu juga file css dan javascript bawaan booststrap yang harus sudah diunduh. Untuk cara unduh serta pengaturannya di vscode bisa melihat kembali pada tautan berikut ini. Setelah itu, silahkan simak cara input kode bootstrap ke dalam file html di bawah ini.
1. Buka Visual Studio Code dan lihat bagian primary side bar.
2. Pada saat folder "bootstrap" terseleksi silahkan buat sebuah file html. Caranya dengan menekan kombinasi tombol: Ctrl + Alt + Windows + N. Cara lainnya dengan klik icon "New file" seperti terlihat pada screenshot di bawah.
3. Ketik nama file, misalnya "index.html" atau "index.htm" kemudian tekan enter.
4. Pindah ke bagian isi file html yang baru saja dibuat. Silahkan ketik "!" kemudian klik "! Emmet Abreviation".
5. Sintaks html dasar secara otomatis tertulis di layar. Tag