Pemrograman

Bahasa

Framework

Peralatan

Info

Mengganti list-style ul dan ol dengan Ikon Fontawesome

– 19 July 2016
Saat memodifikasi halaman arsip dari blog ini. Saya ingin mengganti list-style yang digunakan oleh elemen <ol> atau <ul>. Aslinya, bentuknya bulat dan angka. Kemudian saya ingin mengganti dengan ikon fontawesome. Kebetulan fontawesome sudah terinstal di blog ini.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css"></link>
Kode HTML:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li> 
</ol>
Kode CSS:
ul {
    list-style: none;
    padding: 0;
}
li {
    padding-left: 1.3em;
}
li:before {
    content: "\f073"; /* FontAwesome Unicode */
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -1.3em; /* same as padding-left set on li */
    width: 1.3em; /* same as padding-left set on li */
}
Konsep kerja dari  kode CSS di atas adalah sebagai berikut:
  1. Sebunyikan list-style bawaannya.
  2. Perbaiki ukuran padding.
  3. Gunakan ikon fontawesome.
Perhatikan kode CSS di bagian li:before, di sana terdapat atribut content. Fungsinya untuk mengisi sesuatu sebelum elemen <li>. Isi konten yang diberikan berupa karakter unicode dari fontawesome. Anda bisa temukan karakter unicode fontawesome di sini.

Hasilnya:


Referensi: http://stackoverflow.com/a/13354689

No comments :

Post a Comment