Belajar Bootstrap Part 7 Membuat Icon

Belajar Bootstrap Part 7  Membuat Icon 

Assalamualaikum Wr. Wb.

PENGERTIAN

Icon juga disebut simbol, ialah antarmuka grafik di sebuah data yang digambarkan oleh gambar kecil yang menggambarkan program komputer ataupun berkas komputer dalam pengelola berkas sebuah sistem operasi. Dibuat melalui manipulasi langsung atas simbol, sering ditunjuk melalui tetikus, sehingga pengguna dapat menjalankan fungsinya dengan menggerakkan tetikus tersebut, melihat informasi atau menghapus berkas itu.

Ikon juga digunakan di perangkat lunak. Ikon sering ditempatkan di sebuah bilah alat (toolbar) yang bisa dijalankan fungsinya oleh pengguna dalam program itu dengan mengeklik ikon itu.

LATAR BELAKANG

Dalam membuat website, tentu tidak akan lepas dari icon-icon yang mempercantik info text, tombol dan navigasi. Jika kita membuat icon dari awal atau mengedit dari file image, tentu hal ini sangat memakan banyak waktu. Bootstrap sebagai CSS framework yang sekarang sedang populer, memudahkan para desainer web untuk menambahkan icon yang telah tersedia pada Bootstrap. Bukankah lebih cepat menggunakan yang telah ada? Apalagi simbol yang telah kita buat sendiri atau dari hasil editan bermakna sama dari icon Bootstrap.

MAKSUD & TUJUAN

Mempermudah dalam menambahkan icon tanpa harus membuatnya. Karena kita hanya perlu memanggil class yang ada di dalam framework bootstrap.

ALAT & BAHAN

• LAPTOP/PC
• Bootstrap
• Text Editor
• Browser

PEMBAHASAN

Bootstrap 3 telah menyediakan banyak icon dalam bentuk font yang dapat digunakan untuk mempercantik website, bagaimana cara menerapkannya ke dalam website?

Kita hanya perlu menambahkan kode:

1	<span class="glyphicon glyphicon_class"></span>

dimana glyphicon_class diganti dengan kode yang telah disediakan oleh Bootstrap 3.

Misalkan kita akan menambahkan icon telepon untuk memperjelas info no. telp pada website maka tambahkan kode

1	<span class="glyphicon glyphicon-phone-alt"></span>

glyphicon-phone-alt adalah kode untuk icon telepon (hanya mengubah setelah class glyphicon untuk mencoba icon lain). Contoh penerapan text dan icon pada website:

1	<span class="glyphicon glyphicon-phone-alt"></span> (0274) 123456

Maka akan menghasilkan:

Untuk kode-kode Glyphicon bisa dilihat di sini atau lihat gambar di bawah ini:

Mungkin itu dari saya kurang lebihnya mohon maaf, Silahkan mencoba & jangan lupa share + ikuti.

Syukron

Wassalamualaikum Wr. Wb.

Referensi

http://getbootstrap.com/components/#glyphicons

www.w3schools.com

https://id.wikipedia.org/wiki/Ikon_(komputer)