Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya

Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya Oleh: Arinadi Nur Rohmad

Glyphicon ini berbasis text jadi lebih ringan dan biasa diganti warna seperti huruf pada umumnya yang berbeda dari icon bawaan Bootsrap 2 yang masih menggunakan ikon dengan basis image(PNG). Baiklah, Kita mulai Tutorial “Cara Simple dan Mudah Menggunakan Glyphicon, Icon Ringan dari Bootstrap 3”..

Asalamualaikum..

Sekarang jamanya ikon itu ringan, mudah di ganta ganti warna dan ukuran.. Bersyukurlah, “Sekarang kulit mangis udah ada extraknya” eh… bukan yang ini.. :) Beryukurlah, Sekarang Bootstrap versi terbaru (Bootstrap 3) dengan segala kemudahanya memberikan fasilitas icon bawaan yang di sebut “Glyphicon”. Glyphicon ini berbasis text jadi lebih ringan dan biasa diganti warna seperti huruf pada umumnya yang berbeda dari icon bawaan Bootsrap 2 yang masih menggunakan ikon dengan basis image(PNG).

Baiklah, Kita mulai Tutorial “Cara Simple dan Mudah Menggunakan Glyphicon, Icon Ringan

dari Bootstrap 3”.. Sekarang kita siapkan Alat dan Bahannya.

1. 2. 3. 4. 5.

Laptop atau benda sejenisnya. :) Text Editor Tercinta. Browser. Jquery. Versi 1.7 keatas, bias di download di situs resminya Bootstrap 3. Kalo baru belajar jangan nanggung di v.2 langsung aja ke v.3 karena lebih mudah dan lengkap tentunya..

Langkah 1 Niat.. *Ini Penting..

Langkah 2 Nyalakan Laptop atau benda sejenisnya.. Buka Text editor..

Langkah 3 Buat folder , terserah dimana saja. Misal D: coba.. Lalu buat folder baru di dalamnya untuk wadah file bootstapnya, misal bootstap. Sekarang kita extrak bootstrap 3 yang sudah ada.. Seperti ini..

Hasil struktur Foldernya jadi seperti ini.. coba >bootstrap >>css >>fonts >>js

Langkah 4 Sekarang kita letakan jQuery.min.js di coba>bootstrap>js. Seperti ini..

Langkah 5 Saya akan memberikan contoh ikon yang akan di tampilkan..

Anda dapat lebih banyak melihat ikon dan kode namanya di situs Bootstrap ( http://getbootstrap.com/)

Sekarang misalnya kita ingin menampilkan “Ikon Home” seperti di gambar.. Pastekan kode ini di dalamnya sudah ada penjelasan kodenya..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">

<span class="glyphicon glyphicon-home" style="font-size:18px; color:Green"> Ini Ikon Dari Bootstrap 3.

<script src="bootstrap/js/jquery.min.js"> <script src="bootstrap/js/bootstrap.min.js">

kita melakukan codeing diantara Content Start dan END. Sintax dasar untuk memanggil Glyphicon adalah <span class="glyphicon glyphicon-code">

Lalu Simpan di folder coba, dengan extensi .html dan nama terserah.. Seperti ini..

Langkah 6 Sekarang kita jalankan file html tadi. Open With browser anda.. Hasilnya seperti ini..

Selesai Sekian Tutorial Bootstrap 3 dari saya..

Follow Saya untuk mendapat tutorial menarik lainnya.. :) Original Posted By : Arinadi Nur Rohmad

Tentang Penulis Arinadi Nur Rohmad Code_Start(); Barisan Kata Untuk Aksi Nyata. Code_get_SUCCESS(); :) Sekolah di SMK YAPPI Wonosari, Yogyakarta. Jurusan RPL..