Mengenal Dan Menerapkan Glyphicons Pada Bootstrap

Assalamualaikum Wr.Wb

Oke pada kesempatan kali ini saya akan berbagi sedikit tutorial mengenai glyphicons pada bootstrap.Apa itu glyphicons?Glyphicons adalah kumpulan icon ringan yang telah di sediakan oleh bootstrap dan warnanya bisa di ganti - ganti seperti font,itu menurut pendapat saya sendiri lho ya?jika salah mohon di benarkan.Baiklah tidak usah panjang lebar mari kita mulai.

• Pertama download boostrap dulu bagi yang belum punya,setelah itu tuliskan tag untuk memanggil bootstrap.

<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

•  Setelah itu kita masukkan tag untuk memanggil icon,saya akan mencoba membuat icon signal

<div class="col-sm-4">
        <span class="glyphicon glyphicon-signal logo"></span>   
        </div>    

Berikut SS hasilnya

Catatan:Icon di atas telah saya ubah warna dan ukurannya utuk lebih jelasnya silahkan lihat ss coding yang saya sertakan di akhir postingan ini.

• Selanjutnya kita coba icon Globe atau bumi

 <div class="col-sm-4">
        <span class="glyphicon glyphicon-globe logo"></span>  
        </div>

Berikut SS Hasilnya

• Lalu kita coba menampilkan icon user

 <div class="col-sm-4">
        <span class="glyphicon glyphicon-user logo"></span>  
        </div>

SS Hasilnya

  

•  Yang terakhir kita coba untuk menampilkan icon music

 <div class="col-sm-4">
        <span class="glyphicon glyphicon-music logo2"></span>  
        </div>

 SS Hasilnya

 

Sebenarnya banyak sekali icon - icon yang ada pada glyphicons Bootstrap silahkan di sesuikan dengan kebutuhan masing - masing.Dan yang belum jelas mengenai glyphicons bisa lihat ss coding di bawah

Oke cukup sekian  postingan kali ini mengenai glyphicons semoga bermanfaat di balik banyaknya kekurangan sekian.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb