Mempercantik Blog Dengan Glyphicons Bootstrap

13 March 2016
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

glyphicon
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
Glyphicon

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>

glyph2
<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>
glyph3
Demikian tadi cara menggunakan Glypicons di Bootstrap. Semoga bermanfaat.

INFORMASI PENTING

Apabila ada script atau tips & trik yang tidak bisa digunakan, silahkan beritahu kami melalui kolom komentar atau email kami di psnpenting@gmail.com

papa wardi
papa wardi Updated at: 00:29

Kolom komentar adalah tempat untuk Tanya-Jawab, Kritik-Saran dan tempat untuk berbagi ilmu, BUKAN TEMPAT PROMOSI.
Maaf jika saya tidak bisa membalas satu per satu komentar sahabat semua. Harap maklum.

Copyright 2016 © papawardi