Mempercantik Blog Dengan Glyphicons Bootstrap

Ada banyak cara untuk mempercantik Blog kita. Salah satunya dengan memasang icon di Blog kita. Kenapa harus dengan Glyphicons, pakai icon yang biasanya kan bisa? pakai image juga bisa kan? YA.. memang bisa. Tapi yang menarik dari Glypicons adalah Glyphicons ini berbasis text jadi lebih ringan dan bisa dirubah warna dan ukurannya seperti huruf pada umumnya.

Saat ini Glyphicons tidak bisa digunakan di Blogspot, karena kita tidak bisa mengupload file pendukungnya agar bisa terintegrasi dengan blogspot.

Perlu kita ketahui, saat ini Glyphicons tersedia dalam 3 set, yaitu Halflings, Social dan Filetypes. Hanya saja yang bisa kita gunakan secara gratis hanya yang Halfling set. Termasuk lebih dari 250 glyphs dalam format font dari Glyphicon Halfling set. Anda bisa melihat-lihat macam-macam icon dan kodenya di sini atau di situs resminya Glyphicons disini

Glyphicons Halflings biasanya tidak tersedia secara gratis, tapi pencipta mereka telah membuat mereka tersedia untuk Bootstrap secara gratis. Sebagai ucapan terima kasih, kami hanya meminta Anda menyertakan backlink ke Glyphicons bila memungkinkan

Cara Menggunakan

Untuk menggunakannya, kita perlu menyiapkan (mengupload) file-file pendukungnya seperti:

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

Secara default, file tersebut terletak di ../fonts/. Jika menempatkannya di folder lain, maka kita harus merubah kode CSS yang ada di bootstrap.css atau bootstrap.min.css
kita bisa menempatkan kode glyphicon hampir dimana saja. Semua ikon memerlukan kelas dasar dan kelas icon individual. Pastikan untuk memberi jarak antara ikon dan teks untuk padding yang tepat.
Ada beberapa hal yang perlu diperhatikan saat memasang Glyphicons:

• Jangan mencampur dengan komponen lain.
  Kelas ikon tidak boleh digunakan bersama dengan kelas-kelas lain pada elemen yang sama. Sebaliknya, tambahkan <span> bersarang dan menerapkan kelas ikon dengan <span>.
• Hanya untuk digunakan pada elemen kosong
  Kelas ikon seharusnya hanya digunakan pada elemen yang tidak mengandung konten teks dan tidak memiliki elemen anak.
• Icon yang mudah di akses
  
  • Untuk menghindari keluaran yang tidak diinginkan dan membingungkan layar pembaca (terutama ketika ikon yang digunakan murni untuk dekorasi), kita bisa menyembunyikannya dengan atribut aria-hidden="true".
  • Jika Akita menggunakan ikon untuk menyampaikan makna (bukan hanya sebagai elemen dekoratif), kita bisa menggunakan kelas .sr-only.
  • Jika kita membuat kontrol tanpa teks lain (seperti <button> yang hanya berisi ikon), kita harus selalu menyediakan konten alternatif untuk mengidentifikasi tujuan kontrol. Dalam hal ini, kita bisa menambahkan atribut aria-label pada kontrol itu sendiri.

Contoh Penggunaan

Penggunaan dalam tombol, kelompok tombol untuk toolbar, navigasi, atau diletakkan sebelum input form

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default" aria-label="Center Align">
  <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default" aria-label="Right Align">
  <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default" aria-label="Justify Align">
  <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
</button>

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Demikian tadi cara menggunakan Glypicons di Bootstrap. Semoga bermanfaat.

INGAT!!!

jika ingin mencobanya secara offline, masukkan script diatas pada template dasar diantara kelas .container atau .container-fluid (hapus tulisan <!-- AWAL KONTEN --> sampai <!-- AKHIR KONTEN -->). Jika belum punya template dasar, anda bisa membacanya disini