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.
- 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
|
<!DOCTYPE html><html lang="id"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Menampilkan Ikon Bootstrap 3</title> <!-- CSS Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- CSS kamu, Panggil CSS buatan mu sendiri di bawah sini seperti biasa --> <!-- JS untuk IE --> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- Content START --><br> <p> <span class="glyphicon glyphicon-home" style="font-size:18px; color:Green"></span> Ini Ikon Dari Bootstrap 3.<!-- untuk memanggil ikon gunakan class="glyphicon nama-icon", dan untuk men seting ukuran dan warna ikon dapat dilakukan dari CSS atau style="" --> </p> <br><!-- Content END --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="bootstrap/js/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html> |
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
