Membuat Icon Menggunakan Bootstrap

lebakcyber.net – Membuat icon menggunakan Bootstrap. Oke jadi sekarang kita masuk ke pembahasan mengenai bagaimana cara menambahkan icon menggunakan Bootstrap kedalam halaman web yang sedang kita buat.

Bootstrap sudah menyediakan cara untuk menampilkan icon dengan begitu mudah, cara tersebut disebut dengan istilah “Glyphicon” dan juga terdapat banyak icon yang telah disediakan oleh Bootstrap serta masing-masing icon tersebut telah diberinama dan untuk menggunakannya kita hanya perlu memanggil nama class dari masing-masing icon untuk menampilkannya.

Agar dapat menampilkan icon Bootstrap, kita haru menambahkan sebuah class “Glyphicon” didalam tag pembuka <span> lalu setelah class tersebut ditambahkan selanjutnya kita hanya perlu menambahkan nama class dari masing-masing icon sesuai dengan yang kita inginkan.

Kalau ingin melihat icon-icon apa saja yang telah disediakan oleh Bootstrap, kita dapat melihatnya langsung melalui situs web resmi bootstrap yang dapat diakses melalui link https://www.glyphicons.com/.

Sekarang kita akan praktekan bagaimana cara menampilkan icon kedalam halaman web yang sedang kita buat dengan menggunakan Bootstrap, silahkan buat file dengan nama index.html lalu masukan perintah dibawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Bootstrap - Lebakcyber.net</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>		
    <div class="container">
        <h1>Menampilkan Icon Menggunakan Bootstrap</h1> 
        <p>Icon pensil: <span class="glyphicon glyphicon-pencil"></span></p> 
        <p>Icon pensil menjadi sebuah link:
            <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
        </p>
        <p>Icon kamera: <span class="glyphicon glyphicon-camera"></span></p>
        <p>Icon kamera di dalam sebuah tombol:
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-camera"></span> Search
            </button>
        </p>		
        <p>Icon Printer di dalam tombol besar :
            <a href="#" class="btn btn-primary btn-lg">
                <span class="glyphicon glyphicon-print"></span> Cetak 
            </a>
        </p>
    </div>
</div>
</body>
</html>

Nanti hasilnya akan seperti gambar dibawah ini :

Berdasarkan contoh diatas kita dapat menambahkan glyphicon bootstrap pada semua element html baik itu pada sebuah link, tombol ataupun lainnya. Ukuran dari icon bootstrap itu sendiri mengikuti ukuran font yang digunakan.

Oke jadi sampai disini dulu pembahasan kita mengenai bagaimana cara menambahkan sebuah icon kedalam halaman web yang kita buat dengan menggunakan bootstrap.

Semoga tutorial sederhana ini dapat bermanfaat dan sampai jumpa pada tutorial belajar bootstrap lainnya.

Lebak Cyber Tips dan Trik Komputer

Membuat Icon Menggunakan Bootstrap