List Emoji Icon via CSS

Sebagian besar kalangan muda yang tentunya akrab dengan smartphone pasti tahu yang namanya emoji. Emoji ini merupakan pengembangan dari emoticon yang dulu sering kita jumpai pada aplikasi chatting semacam Yahoo Messenger. Jika cara menampilkan emoticon itu dengan menggunakan kode, semacam [shakehand] atau :wink:, cara menampilkan emoji ini biasanya dilakukan dengan keyboard khusus yang ada di smartphone.

Nah, kira-kira bisa ga ya, emoji ini ditampilkan di web? Jawabannya adalah, bisa. Namun masing-masing tampilan emoji bisa berbeda tergantung device yang digunakan. Cara menggunakan emoji cukup mudah. Kita cukup mengeset nilai unicode emoji yang diinginkan pada property content pada css. Sebagai contoh di bawah ini akan menampilkan emoji 

.emoji-mringis:before {
  content: "\01F601";
}

Untungnya Tim Whitlock membuat halaman tabel perbandingan list emoji beserta referensinya dengan komplit. Sehingga kita bisa melihat kode emoji serta previewnya di setiap device.

css-tricks.com

Selamat mencoba gaes.

Sumber: https://css-tricks.com/emoji-toggles/

Nanda Widyatama

Seorang web developer. Gemar diajak kuliner. Suka fotografi. Sering ngedit sana ngedit sini. Suami yang siaga.