Bootstrap - Glyphicons

Bab ini akan membahas tentang Glyphicons, penggunaannya dan beberapa contoh. Bootstrap membundel 200 mesin terbang dalam format font. Sekarang mari kita mengerti apa itu Glyphicons.

Apa itu Glyphicons?

Glyphicons adalah font ikon yang dapat Anda gunakan dalam proyek web Anda. Glyphicons Halflings tidak gratis dan memerlukan lisensi, namun pencipta mereka telah menyediakannya untuk proyek Bootstrap tanpa biaya.

"Direkomendasikan, sebagai ucapan terima kasih, kami meminta Anda untuk menyertakan tautan opsional kembali ke GLYPHICONS kapan pun memungkinkan". - Dokumentasi Bootstrap

Di mana menemukan Glyphicons?

Sekarang kita telah mengunduh versi Bootstrap 3.x dan memahami struktur direktorinya dari bab Pengaturan Lingkungan , glyphicons dapat ditemukan di dalam folder font . Ini berisi file-file berikut -

• glyphicons-halflings-regular.eot
• glyphicons-halflings-regular.svg
• glyphicons-halflings-regular.ttf
• glyphicons-halflings-regular.woff

Aturan CSS terkait ada dalam file bootstrap.css dan bootstrap-min.css dalam folder css folder dist . Anda dapat melihat glyphicons yang tersedia di link ini GLYPHICONS .

Pemakaian

Untuk menggunakan ikon, cukup gunakan kode berikut di mana saja dalam kode Anda. Berikan jarak antara ikon dan teks untuk padding yang tepat.

<span class = "glyphicon glyphicon-search"></span>

Contoh berikut menunjukkan ini -

<p>
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order-alt"></span>
   </button>
</p>

<button type = "button" class = "btn btn-default btn-lg">
   <span class = "glyphicon glyphicon-user"></span>
   
   User
</button>

<button type = "button" class = "btn btn-default btn-sm">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

<button type ="button" class = "btn btn-default btn-xs">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>