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”..

Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya

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. Laptop atau benda sejenisnya.
  2. Text Editor Tercinta.
  3. Browser.
  4. Jquery. Versi 1.7 keatas, bias di download di situs resminya
  5. 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..  

Extrak BOOTSTRAP 3

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..

Move jQUERY

 

 

Langkah 5

Saya akan memberikan contoh ikon yang akan di tampilkan..

Bootstrap Icon

 

 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]>
    <![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..

Save Icon Bootstrap

 

 

Langkah 6

Sekarang kita jalankan file html tadi.

Open With browser anda..

Hasilnya seperti ini..

Hasil Icon Bootstrap

 

Selesai

Sekian Tutorial Bootstrap 3 dari saya..

 

Follow Saya untuk mendapat tutorial menarik lainnya..

Original Posted By : Arinadi Nur Rohmad


About Author

Arinadi Nur Rohmad

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


Comment & Discussions

  • muhammad zuanda
    test

  • Maaf Ane lupa password, system lupa password jagocoding lg troble..
    layangkan komentar di http://arinadi-nr.blogspot.com
    udah tak repost kesana.. trimakasih

  • Nuha U Muhammad
    saya coba koq iconnya ndak muncul ya bang??

  • Arinadi Nur Rohmad
    coba lagi gan, atau coba kasih scripnya..

  • Please LOGIN before if you want to give the comment.