Monday, December 19, 2016

Belajar Bootstrap Part 7 : Membuat Icon Bootstrap

Penulis INero Diterbitkan 11:20 PM

MEMBUAT ICON BOOTSTRAP
Bootstrap menyediakan fasilitas untuk membuat atau menampilkan icon dengan sangat mudah, fasilitas ini disebut dengan "Glyphicon". Ada sangat icon yang sudah disediakan oleh Bootstrap. Dan masing - masing sudah diberi nama dan kita tinggal memanggil classnya masing - masing untuk menampilkan icon yang kita inginkan.

Untuk menampilkan icon Bootstrap pertama yang harus kita lakukan adalah menambahkan class "glyphicon" kemudian tambahkan class icon masing - masing sesuai kebutuhan sobat. Untuk melihat icon - icon yang disediakan oleh Bootstrap silahkan menuju situs resmi Bootstrap. Klik Disini

CARA MEMBUAT ICON DENGAN BOOTSTRAP
Untuk cara Membuat Icon Dengan Bootstrap perhatikan contoh berikut. Dan usahakan mengetik sendiri agar mendapatkan pemahaman


<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 7 : Cara Membuat Icon Dengan Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>        
    <div class="container">
        <h1>Cara Membuat Icon Dengan Bootstrap | <a href="http://www.script-kiddies.org">Script Kiddies</a></h1> 
        <p>Icon surat: <span class="glyphicon glyphicon-envelope"></span></p> 
        <p>Icon surat sebagai link:
            <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
        </p>
        <p>Icon hati: <span class="glyphicon glyphicon-heart"></span></p>
        <p>Icon hati di atas tombol:
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-search"></span> Search
            </button>
        </p>        
        <p>Icon Print: <span class="glyphicon glyphicon-print"></span></p> 
        <p>Icon Print di atas tombol besar ("btn-lg"):
            <a href="#" class="btn btn-success btn-lg">
                <span class="glyphicon glyphicon-print"></span> Print 
            </a>
        </p>
    </div>
</div>
</body>
</html>

KESIMPULAN
Dapat kita simpulkan bahwa icon glyphicon Bootstrap dapat diselipkan pada semua element HTML. Kita dapat menambahnya pada tombol, link dan lainya. Ukuran glyphicon Bootstrap dapat kita atur sesuai ukuran font dan sesuai keinginan kita. Untuk menambahkan glyphicon sangat mudah yaitu tinggal memberi class "glyphicon" dan nama icon yang kita butuhkan. Untuk melihat list dari icon Bootstrap dapat kita lihat pada Website Resmi Bootstrap yang saya berikan tadi

REFERENSI : Malas Ngoding

TUTORIAL BOOTSTRAP DASAR LAINYA :