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.

Untuk menampilkan icon bootstrap yang pertama kali harus di lakukan adalah menambahkan class “glyphicon” di dalam tag pembuka atau tag lainnya, setelah menambahkan class glyphicon kemudian tambahkan nama class icon masing-masing sesuai dengan icon yang ingin kita inginkan.

Fitur glyphicons tidak bisa digunakan secara langsung di versi 4 ini, ada beberapa langkah yang harus dilakukan, yaitu :

Unduh file glyphicons.css di sini
Simpan di folder css bootstrap project web kita
Coding di bagian header untuk deklarasi penggunaan file css tersebut, contoh :

Contoh :



    
        
        
        
        
        Tutorial Membuat Icon Dengan Bootstrap 4
    

    
        

            

            
                Cara Membuat Icon Dengan Bootstrap
                Icon surat: 
                Icon surat sebagai link:
                    
                
                Icon hati: 
                Icon hati di atas tombol:
                    
                
                Icon Print: 
                Icon Print di atas tombol besar ("btn-lg"):
                    
                         Print

Hasilnya :

Cara menggunakan icon bootstrap 5 offline

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 https://getbootstrap.com/

Referensi :

https://www.malasngoding.com/cara-membuat-icon-dengan-bootstrap/

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 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 juga tertera di sana. Sebagaimana dimaklumi, tag ini sangat dibutuhkan agar tampilan responsif untuk perangkat mobile. Lihat! Isi file index.html baru saja dibuat dengan cara otomatis dengan VSCode.

6. Ketikan tag dan pilih "file booststrap.css "untuk melengkapi sintaks.

7. Link file css bootstrap ini: "" tempatkan sebelum tag .

8. Lakukan hal yang sama untuk file javascriptnya.

9. Tempatkan script ini: sebelum tag .

10. Tekan kombinasi tombol Alt + L Alt + O untuk membuka live server. Cara lainnya bisa dengan klik kanan kemudian pilih opsi:"Open with Live Server".

11. Klik "Allow access".

12. Fungsi live server sudah berjalan, judul yang terlihat pada tab browser juga berfungsi.

13. Silahkan buat sebuah tulisan misalnya:

Haloooo, rekan-rekan Sebardi Blog

. Tempatkan kode tersebut diantara tag dan kemudian klik File > Save atau tekan kombinasi tombol Ctrl + S untuk menyimpan file.

14. Tampilan pada halaman web akan terlihat seperti berikut ini.

15. Sekarang masukan kode-kode bootstrap untuk menguji. Misalnya dengan menambahkan class="text-info" dan "text-danger". Contoh pada nomor 13 di atas, kodenya dilengkapi menjadi:

Haloooo, rekan-rekan Sebardi Blog

.text-danger

16. Maka terjadi perubahan pada halaman web menjadi seperti berikut.

Kesimpulan

Untuk memodifikasi halaman web di atas kita hanya menambahkan class yang terdapat pada bootstrap. Cara ini terlihat lebih simpel jika dibandingkan dengan cara biasa. Kesederhanaan inilah yang menjadi daya tarik untuk mempelajari bootstrap. Terutama bagi pemula yang belajar komputer secara otodidak.

Begitu juga dengan tool yang digunakan yaitu Visual Studio Code. Sebagaimana terlihat pada praktikum di atas yang tidak menggunakan aplikasi web server. Betul, tutorial di atas tidak menggunakan Xampp, Wamp atau Laragon.

Akan tetapi preview with browser tetap bisa dijalankan. Dan ini fungsi Live Server yang merupakan extension VSCode. Anda tertarik untuk menggunakan Bootstrap dengan Visual Studio Code? Mudah-mudahan artikel selanjutnya tidak bosan membahas tool yang satu ini.

Selamat mencoba.