Ikon, dalam pengembangan program, baik desktop, web, maupun mobile, berkaitan erat dengan aspek estetika dan pengalaman pengguna atau user experience (UX). Meskipun bukan sebuah keharusan, program yang memakai ikon sebagai pendamping elemen antarmuka memiliki dampak positif bagi pengguna. Selain program tersebut tampak lebih manis ketimbang program-tanpa-ikon, pengguna akan lebih merasa nyaman dan terbantu.
Kebanyakan ikon-ikon yang dipakai dalam sebuah program bersifat statis. Artinya, ikon tersebut tidak memuat informasi yang dapat berubah berdasarkan kondisi tertentu. Nah, apakah ikon dapat bekerja secara dinamis—lawan statis dalam konteks tersebut? Ya, setahu saya baru satu set ikon yang dapat melakukannya: Font Awesome (FA).
FA merupakan perangkat ikon vektor berbasis CSS yang dapat dipakai secara gratis dalam pengembangan web. Hingga versi terbaru (4.4.0) dirilis, tercatat ada 585 buah ikon yang beraneka rupa. Masing-masing ikon dapat diubah gayanya (style), seperti ukuran, warna, bayangan, dan unsur gaya lain yang mungkin dilakukan CSS. FA pun dapat bekerja bersama dengan CSS framework, semisal Bootstrap, Semantic UI, Foundation, dsb.
Salah satu keunggulan yang dimiliki FA adalah kemampuan untuk menumpuk sebuah ikon dengan ikon atau teks lain hingga terbentuk sebuah ikon baru (stacked icon). Ikon pertama berperan sebagai induk (parent) bagi ikon maupun teks turunannya (child) sehingga ia harus diperbesar ukurannya. Ikon yang dipilih sebagai ikon induk biasanya adalah ikon “polos”: di bagian tengahnya terdapat ruang untuk tempat ikon atau teks turunannya. Presisi stacked icon memerlukan perhitungan ukuran yang pas antara ikon induk dan ikon atau teks turunannya. Berikut adalah beberapa contoh stacked icon yang dapat kita ciptakan.
Agar dapat dikatakan dinamis, stacked icon tersebut perlu kita isi dengan informasi yang dapat berubah menyesuaikan kondisi tertentu. Sebagai contoh: informasi jumlah notifikasi pesan masuk, kuantitas suatu berkas, stok barang, tanggal, dll. Berikut adalah contoh ikon yang menampilkan informasi tanggal, bulan, dan tahun saat ini.
Kita dapat memperoleh tanggal, bulan, dan tahun saat ini dengan menggunakan PHP atau JavaScript. Amsal di atas menggunakan JavaScript karena CodePen playground tidak mendukung PHP.
Akhirnya, terpujilah Dave Gandy!
Luslif 