Ditulis oleh: Ditulis pada: 5/05/2019
Sebaiknya Gunakan Kode HTML Entity Untuk Tombol Close Daripada Pakai Huruf X - Dalam membuat sebuah halaman web atau membuat sebuah elemen dalam sebuah halaman web kadang memerlukan sebuah tombol close jika itu sebuah kotak melayang seperti modal box atau popup box.
Dan untuk membuat tombol close itu cukup mudah karena sudah ada kode HTML Entity dan ikon SVG untuk tombol close.
Namun sampai saat ini saya masih melihat masih ada yang menggunakan huruf X untuk tombol close.
Sebenarnya tidak ada yang melarang untuk menggunakan huruf X untuk tombol close, namun huruf X tidak enak dilihat sebagai tanda silang.
Coba bandingkan antara X dan × tentu saja ikon yang kedua yang lebih enak dilihat, bukan?
Ikon kedua tersebut menggunakan kode HTML Entity × atau untuk yang lebih baik menggunakan kode ❌
Namun saya lebih sering menggunakan kode × karena lebih mudah diingat.
Berikut contoh penulisan kode untuk tombol close:
<button aria-label="Close">×</button>Atau
<button aria-label="Close">❌</button>Untuk mengatur besar kecilnya ikon, kita gunakan font-size dan font-weight untuk ketebalannya.
Dan untuk lebih aman lagi kita bisa menggunakan kode ikon SVG yang aman dibaca di semua browser atau OS.
Berikut kode ikon SVG untuk ikon close .
<svg width="24" height="24" viewBox="0 0 24 24">
<path fill="#000000" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg>Semoga bermanfaat.