Home / Bootstrap / Tutorial Bootstrap Bagian 9: Cara menggunakan Icon Glyphicon pada Bootstrap

Tutorial Bootstrap Bagian 9: Cara menggunakan Icon Glyphicon pada Bootstrap

Contoh Penggunaan icon dalam websiteTutorial bootstrap kali ini kita akan membahas Cara menggunakan Icon Glyphicon pada Bootstrap. Tapi sebelumnya ada baiknya kita memahami fungsi icon dalam website. Icon digunakan untuk mewakili fungsi suatu link/menu, keterangan maupun isi dalam sebuah website. Dengan adanya icon-icon pada website maka tampilannya akan semakin menarik dan elegan.

Icon juga dapat digunakan untuk mengurangi penggunaan tempat pada sebuah halaman website. Item-item menu dalam Navigasi menu yang menggunakan icon akan membutuhkan tempat yang lebih kecil dalam halaman website jika dibandingkan dengan menu yang menggunakan tulisan.

Selain digunakan untuk mewakili fungsi sebuah menu, mempercantik tampilan dan mengurangi penggunaan tempat, icon juga digunakan untuk mempertegas penyampaian sebuah informasi, himbauan maupun peringatan dalam sebuah website(baca: Membuat Pesan Alert dengan Bootstrap).

Pada tutorial cara menggunakan Icon Glyphicon pada Bootstrap ini, kita akan membahas penggunaan dan jenis-jenis icon glyphicon yang dapat digunakan pada bootstrap. Jumlah icon yang tersedia dalam bootstrap beragam, totalnya lebih dari 100 icon. Icon-icon glyphicon tersebut dapat digunakan di semua lokasi pada halaman website, kita dapat menempatkan di Navbar (baca: Membuat Navigation Bar(Navbar) dan dropdown menu dengan Bootstrap), dalam link, di button, atau bahkan dalam elemen form yang lain seperti textbox.

Berikut ini contoh cara penggunaan icon glyphicon pada bootstrap:

<!DOCTYPE html>
<html>
  <head>
    <title>Glyphicon dalam Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
            <h3>Penggunaan Glyphicon Bootstrap</h3>
            <p><a href="#"><span class="glyphicon glyphicon-user"></span> Glyphicon dalam Link </a></p>
            <p><button class="btn btn-default btn-info" type="submit">
            <span class="glyphicon glyphicon-search"></span> Glyphicon dalam button
            </button></p>
            <p><button type="button" class="btn btn-default btn-lg">
              <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
            </button></p>
            <div class="alert alert-danger" role="alert">
              <span class="glyphicon glyphicon-exclamation-sign"></span>
              Ini Glyphicon dalam Alert!
            </div>
            </div>
        </div>
    </div>
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Pada contoh diatas, glyphicon ditempatkan dalam sebuah link, button dan Alert. Cara memanggil glyphicon yaitu <span class=”glyphicon jenis-glyphicon“></span>. Jadi pertama harus kita panggil terlebih dahulu class glyphicon kemudian disertai jenis glyphicon.

Mengenai pembahasan jenis-jenis button, ukuran button dan Alert dapat di lihat pada tutorial Membuat Button/tombol dengan bootstrap dan Membuat pesan Alert dengan Bootstrap

Hasilnya seperti gambar berikut

Conoth penggunaan Icon Glyphicon pada Bootstrap

Demikian tutorial buutstrap ke 9: Cara menggunakan Icon Glyphicon pada Bootstrap. Jenis-jenis glyphicon beserta nama classnya dapat di lihat pada gambar dibawah.

Tutorial selanjutnya adalah Cara membuat Panel dengan Bootstrap. Dalam tutorial tersebut kita akan membahas penggunaan class-class bootstrap untuk membuat panel sehingga tampilan website akan lebih rapi dan terstruktur.Daftar icon glyphicon pada bootstrap bagian 1Daftar icon glyphicon pada bootstrap bagian 2Daftar icon glyphicon pada bootstrap bagian 3Daftar icon glyphicon pada bootstrap bagian 4Daftar icon glyphicon pada bootstrap bagian 5Daftar icon glyphicon pada bootstrap bagian 7Daftar icon glyphicon pada bootstrap bagian 6

Comments

comments

About Roberto Kaban

Roberto Kaban
My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial Bootstrap Bagian 13: Membuat Jumbotron Dengan Bootstrap

Tutorial bootstrap kali ini membahas cara membuat jumbotron dengan bootstrap. Jumbotron umumnya ditempatkan pada halaman …

Leave a Reply

Your email address will not be published. Required fields are marked *