Perkenalan Glyphicon Bootstrap Dan Cara Gampang Menggunakannya

20 views

Asalamualaikum..

 

Sekarang jamanya ikon itu ringan, gampang 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 memperlihatkan kemudahan icon bawaan yang di sebut “Glyphicon”.

Glyphicon ini berbasis text jadi lebih ringan dan biasa diganti warna ibarat aksara pada umumnya yang berbeda dari icon bawaan Bootsrap 2 yang masih memakai ikon dengan basis image(PNG).

 

Baiklah, Kita mulai Tutorial “Cara Simple dan Praktis 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 gres mencar ilmu jangan nanggung di v.2 pribadi aja ke v.3 alasannya lebih gampang 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 gres di dalamnya untuk wadah file bootstapnya, misal bootstap.

Sekarang kita extrak bootstrap 3 yang sudah ada..

Seperti ini..  

Hasil struktur Foldernya jadi ibarat ini..

coba
>bootstrap
>>css
>>fonts
>>js

 

Langkah 4

Sekarang kita letakan jQuery.min.js di  coba>bootstrap>js.

Seperti ini..

 

 

Langkah 5

Saya akan memperlihatkan pola ikon yang akan di tampilkan..

 

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

 

Sekarang contohnya kita ingin menampilkan “Ikon Home” ibarat di gambar..

Pastekan  kode ini di dalamnya sudah ada klarifikasi 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 ibarat 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 sanggup 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 melaksanakan codeing diantara Content Start dan END.

Sintax dasar untuk memanggil Glyphicon ialah <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 ibarat ini..

 

Selesai

Sekian Tutorial Bootstrap 3 dari saya..

 

Follow Saya untuk menerima tutorial menarik lainnya..

Original Posted By : Arinadi Nur Rohmad

Author: 
    author
    No related post!