Icon Fonts 101

Icon fonts adalah jenis huruf di mana glyph — biasanya huruf dan angka — digantikan oleh simbol bergambar. Alih-alih menampilkan huruf "A", sebuah icon font menampilkan ikon rumah, kaca pembesar pencarian, atau keranjang belanja.

Karena ikon berada di dalam file font, mereka berperilaku persis seperti teks. Anda dapat mengubah ukurannya dengan font-size, mengubah warnanya dengan color, menambahkan text shadows, menerapkan CSS transitions, bahkan menganimasikannya — semua tanpa menyentuh satu pun file gambar.

Pendekatan ini memberikan beberapa manfaat praktis:

• Independen dari resolusi — garis vektor ditampilkan tajam pada kepadatan layar apapun
• Muatan kecil — satu file font terkompresi menggantikan puluhan aset gambar individual
• Kontrol CSS — warna, ukuran, bayangan, opasitas, dan status hover tersedia gratis dengan gaya teks
• Satu permintaan HTTP — seluruh set ikon dimuat dalam satu perjalanan jaringan

Di awal web, para pengembang mengandalkan gambar individual atau CSS image sprites — gambar komposit besar di mana setiap ikon menempati area persegi panjang tetap. Sprites mengurangi permintaan HTTP tetapi rapuh: menambah atau mengubah ukuran ikon berarti membuat ulang seluruh sprite sheet dan memperbarui pixel offset secara manual.

Sekitar tahun 2012, proyek seperti Font Awesome dan IcoMoon mempopulerkan alternatif yang lebih bersih: mengemas ikon sebagai font glyph yang dipetakan ke Area Penggunaan Pribadi Unicode. Desainer dapat mengganti seluruh set ikon dengan mengubah satu deklarasi @font-face, dan pengembang dapat menata ikon dengan CSS yang sudah mereka gunakan untuk teks. Teknik ini menyebar dengan cepat dan tetap menjadi pilihan yang andal dan berbiaya rendah untuk sistem desain yang menggunakan ikonografi satu warna.

Perdebatan "icon fonts vs inline SVG" telah menjadi topik utama dalam diskusi front-end selama lebih dari satu dekade. Kedua pendekatan valid — pilihan yang tepat bergantung pada kebutuhan proyek Anda.

Icon Fonts

• Satu permintaan HTTP — satu file font menyediakan setiap ikon
• Gaya CSS sangat mudah — ubah color, font-size, dan text-shadow seperti teks biasa
• Hanya satu warna — setiap glyph hanya mendukung satu warna isi
• Mudah ditambahkan — tambahkan tautan stylesheet, gunakan CSS class, selesai

Inline SVG

• Multi-warna — setiap path dapat memiliki warna isi, stroke, atau gradien sendiri
• Aksesibel secara default — <title> dan aria-label memberikan semantik nyata kepada pembaca layar
• Dapat di-cache secara individual — ikon yang tidak digunakan tidak pernah diunduh
• Kontrol terperinci — animasikan path individual, terapkan filter per elemen

SVG Sprites

• Menggabungkan beberapa SVG menjadi satu <symbol> sprite sheet
• Referensikan ikon dengan <use href="#icon-name">
• Menawarkan manfaat keduanya — satu permintaan, multi-warna, aksesibel — tetapi memerlukan build pipeline yang lebih kompleks

Icon fonts dapat dikemas dalam lima format file, masing-masing dengan kompresi, dukungan browser, dan kasus penggunaan yang berbeda. Berikut perbandingannya secara ringkas:

Tidak yakin format mana yang harus disertakan? Gunakan panduan keputusan praktis ini:

• Jika hanya memilih satu — gunakan WOFF2. Menawarkan kompresi terbaik (Brotli) dan mencakup 97%+ browser.
• Jika perlu dukungan IE 11 — gunakan WOFF2 + WOFF. WOFF menangani browser yang masih belum mendukung dekode Brotli.
• Jika perlu dukungan IE 8 — gunakan WOFF2 + WOFF + EOT. EOT adalah satu-satunya format yang dipahami Internet Explorer 6-8.
• Untuk aplikasi desktop — gunakan TTF. Ini adalah format asli untuk rendering font tingkat OS di Windows, macOS, dan Linux.
• Untuk debugging masalah font — periksa SVG Font. Struktur XML-nya dapat dibaca manusia, sehingga mudah memverifikasi glyph paths dan metadata.

Pelajari lebih dalam setiap format untuk memahami cara kerjanya, kompatibilitas browser, dan praktik terbaik:

Pelajari cara menggunakan format-format ini dalam proyek Anda: