Custom List Style – Font Awesome

Custom List Style – Font Awesome

Halo apa kabar teman-teman, artikel kali ini kita akan mencoba membuat sebuah list dengan menggunakan bantuan font-awesome. Font Awesome sendiri merupakan sekumpulan icon (tool kit) yang sudah disediakan secara gratis, jadi kita tinggal mengambilnya kemudian kita sedikit melakukan konfigurasi, supaya dapat diaktifkan.

Bagi sebagian web developer, membuat list secara manual akan sangat merepotkan, karena disetiap tag HTML List kita merubah menambahkan icon satu-persatu. Ternyata ada triknya lho, kita bisa menggunakan Pseudo CSS Before.

Langsung saja

Buat file index.html

kemudian buat file style.css

Pada tutorial diatas, secara otomatis list icon berubah. Kita tidak meletakkan pada tag HTML melainkan di CSS.

Untuk sumbernya kalian bisa ambil disini:
1. Font Awesome Icon
2. Font Awesome Content Value
3. Pseudo CSS Before

Comments are closed.