Emojis para tu web o dispositivo móvil

El término japonés Emoji significa pictograma dónde la "e" es dibujo o imagen y "moji" es letra, es decir, un dibujo para expresar algo y cuyo uso se extiende a mensajes electrónicos y sitios web.
Los emojis son utilizados principalmente en conversaciones de texto a través de teléfonos inteligentes.

Emojis y Unicode

Los emojis son caracteres como las letras y los números.
Apple y Google empujaron para que se estandarizaran en Unicode, entendido como un estándar internacional encargado de la representación de caracteres de escritura de la mayoría de idiomas en sistemas informáticos.

El proceso de estandarización de los emojis comenzó en 2007 y hasta la versión 6.0 de Unicode, de 2010, no estuvo lista.
Pero ya están dentro de Unicode y hay 772 emojis dentro de Unicode (perfectamente identificados en codificación y significado).

Si los emojis no se representan bien en un sistema operativo es porque no tienen, dentro de la fuente habitual que usa el sistema, dichos caracteres implementados.
Es como si alguien nos manda algo en Chino o Japonés. Nuestro ordenador entiende que es un carácter de Unicode, pero si no tenemos instaladas las fuentes en Chino o Japonés, no las veremos bien.

Fuente original: xatakandroid

Instrucciones de uso

Podemos utilizarlos de tres formas diferentes:

• Apoyándonos en las fuentes de usuarios (tipografías) presentes en cada navegador y haciendo referencia a su entidad html.
  

  <style type="text/css">
  .emj-original{
   font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", Symbola, "lucida grande", tahoma, verdana, arial, sans-serif;
   font-size: 30px;
  }
  </style">
  <div class="emj-original">
   &#127873; &#127874; &#127875; &#127876; &#127877; &#127878; &#127879; &#127880; &#127881; &#127882;
  </div>
  

  
  
• o copiando directamente el carácter correspondiente al emoji.
  

  <style type="text/css">
  .emj-original{
   font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", Symbola, "lucida grande", tahoma, verdana, arial, sans-serif;
   font-size: 30px;
  }
  </style">
  <div class="emj-original">
   🎁 🎂 🎃 🎄 🎅 🎆 🎇 🎈 🎉 🎊
  </div>
  

  
  En ambos casos el código html devuelto es:
  
  
  🎁 🎂 🎃 🎄 🎅 🎆 🎇 🎈 🎉 🎊
  
  
• Usando una fuente externa para visualizar en mi página web utilizando la regla @font-face.
  

  <style type="text/css">
  @font-face{
   font-family: "Twitter Emoji";
   src: url("http://cdn.twittercounter.com/assets/fonts/EmojiSymbols-Regular.woff") format("woff");
  }
  .emj-face{
   font-family: "Twitter Emoji";
   font-size: 30px;
   color:#b11e1e;
  }
  </style">
  <div class="emj-face">
   &#127873; &#127874; &#127875; &#127876; &#127877; &#127878; &#127879; &#127880; &#127881; &#127882;
  </div>
  

  Ahora la página html renderiza los siguientes caracteres unicode:
  
  
  🎁 🎂 🎃 🎄 🎅 🎆 🎇 🎈 🎉 🎊

Soporte

Los emojis están disponibles para su uso en la mayoría de los dispositivos móviles de última generación como Android, Apple y Windows Phone.

Apple fué el primero que incorporó los caracteres unicode emoji (en 2011) con el lanzamiento de Mac OS X v10.7: es la octava versión de OS X, el sistema operativo de Apple para sus ordenadores de escritorio, portátiles y servidores.

Google añade soporte nativo emoji al teclado (en 2013) para los dispositivos con Android 4.4 y versiones posteriores.

Windows 8 y versiones superiores son compatibles con emoji a través de la familia de fuentes Microsoft Segoe UI. A partir de Windows 8.1, la fuente Segoe UI Emoji suministra pictografías a todo color.

Algunas distribuciones de Linux como Ubuntu, Debian, Fedora y OpenSUSE admiten caracteres emoji instalando fuentes adicionales.

En general, cualquier sistema operativo que permita añadir fuentes adicionales tendrá soporte emoji.

Fuente: wikipedia

Catálogo de Emojis

A continuación muestro la lista completa de emojis.
Puedes copiar directamente el emoji o utilizar la entidad html correspondiente posicionando el cursor encima de cada uno (aparecerá un tooltip con su entidad html)

Twitter Emoji (clic para activar la fuente)

🈚 🈲 🈳 🈴 🈵 🈶 🈷 🈸 🈹 🈺 🈁 🈂 🉐 🉑 🌀 🌁 🌂 🌃 🌄 🌅 🌆 🌇 🌈 🌉 🌊 🌋 🌌 🌍 🌎 🌏 🌐 🌑 🌒 🌓 🌔 🌕 🌖 🌗 🌘 🌙 🌚 🌛 🌜 🌝 🌞 🌟 🌠 🌍 🌰 🌱 🌲 🌳 🌴 🌵 🌷 🌸 🌹 🌺 🌻 🌼 🌽 🌾 🌿 🍀 🍁 🍂 🍃 🍄 🍅 🍆 🍇 🍈 🍉 🍊 🍋 🍌 🍍 🍎 🍏 🍐 🍑 🍒 🍓 🍔 🍕 🍖 🍗 🍘 🍙 🍚 🍛 🍜 🍝 🍞 🍟 🍠 🍡 🍢 🍣 🍤 🍥 🍦 🍧 🍨 🍩 🍪 🍫 🍬 🍭 🍮 🍯 🍰 🍱 🍲 🍳 🍴 🍵 🍶 🍷 🍸 🍹 🍺 🍻 🍼 🎀 🎁 🎂 🎃 🎄 🎅 🎆 🎇 🎈 🎉 🎊 🎋 🎌 🎍 🎎 🎏 🎐 🎑 🎒 🎓 🎠 🎡 🎢 🎣 🎤 🎥 🎦 🎧 🎨 🎩 🎪 🎫 🎬 🎭 🎮 🎯 🎰 🎱 🎲 🎳 🎴 🎵 🎶 🎷 🎸 🎹 🎺 🎻 🎼 🎽 🎾 🎿 🏀 🏁 🏂 🏃 🏄 🏆 🏇 🏈 🏉 🏊 🏠 🏡 🏢 🏣 🏤 🏥 🏦 🏧 🏨 🏩 🏪 🏫 🏬 🏭 🏮 🏯 🏰 🐀 🐁 🐂 🐃 🐄 🐅 🐆 🐇 🐈 🐉 🐊 🐋 🐌 🐍 🐎 🐏 🐐 🐑 🐒 🐓 🐔 🐕 🐖 🐗 🐘 🐙 🐚 🐛 🐜 🐝 🐞 🐟 🐠 🐡 🐢 🐣 🐤 🐥 🐦 🐧 🐨 🐩 🐪 🐫 🐬 🐭 🐮 🐯 🐰 🐱 🐲 🐳 🐴 🐵 🐶 🐷 🐸 🐹 🐺 🐻 🐼 🐽 🐾 👀 👂 👃 👄 👅 👆 👇 👈 👉 👊 👋 👌 👍 👎 👏 👐 👑 👒 👓 👔 👕 👖 👗 👘 👙 👚 👛 👜 👝 👞 👟 👠 👡 👢 👣 👤 👥 👦 👧 👨 👩 👪 👫 👬 👭 👮 👯 👰 👱 👲 👳 👴 👵 👶 👷 👸 👹 👺 👻 👼 👽 👾 👿 💀 💁 💂 💃 💄 💅 💆 💇 💈 💉 💊 💋 💌 💍 💎 💏 💐 💑 💒 💓 💔 💕 💖 💗 💘 💙 💚 💛 💜 💝 💞 💟 💠 💡 💢 💣 💤 💥 💦 💧 💨 💩 💪 💫 💬 💭 💮 💯 💰 💱 💲 💳 💴 💵 💶 💷 💸 💹 💺 💻 💼 💽 💾 💿 📀 📁 📂 📃 📄 📅 📆 📇 📈 📉 📊 📋 📌 📍 📎 📏 📐 📑 📒 📓 📔 📕 📖 📗 📘 📙 📚 📛 📜 📝 📞 📟 📠 📡 📢 📣 📤 📥 📦 📧 📨 📩 📪 📫 📬 📭 📮 📯 📰 📱 📲 📳 📴 📵 📶 📷 📹 📺 📻 📼 🔀 🔁 🔂 🔃 🔄 🔅 🔆 🔇 🔈  🔉 🔊 🔋 🔌 🔍 🔎 🔏 🔐 🔑 🔒 🔓 🔔 🔕 🔖 🔗 🔘 🔙 🔚 🔛 🔜 🔝 🔞 🔟 🔠 🔡 🔢 🔣 🔤 🔥 🔦 🔧 🔨 🔩 🔪 🔫 🔬 🔭 🔮 🔯 🔰 🔱 🔲 🔳 🔴 🔵 🔶 🔷 🔸 🔹 🔺 🔻 🔼 🔽 🕐 🕑 🕒 🕓 🕔 🕕 🕖 🕗 🕘 🕙 🕚 🕛 🕜 🕝 🕞 🕟 🕠 🕡 🕢 🕣 🕤 🕥 🕦 🕧 🗻 🗼 🗽 🗾 🗿 😀 😁 😂 😃 😄 😅 😆 😇 😈 😉 😊 😋 😌 😍 😎 😏 😐 😑 😒 😓 😔 😕 😖 😗 😘 😙 😚 😛 😜 😝 😞 😟 😠 😡 😢 😣 😤 😥 😦 😧 😨 😩 😪 😫 😬 😭 😮 😯 😰 😱 😲 😳 😴 😵 😶 😷 😸 😹 😺 😻 😼 😽 😾 😿 🙀 🙅 🙆 🙇 🙈 🙉 🙊 🙋 🙌 🙍 🙎 🙏 🚀 🚁 🚂 🚃 🚄 🚅 🚆 🚇 🚈 🚉 🚊 🚋 🚌 🚍 🚎 🚏 🚐 🚑 🚒 🚓 🚔 🚕 🚖 🚗 🚘 🚙 🚚 🚛 🚜 🚝 🚞 🚟 🚠 🚡 🚢 🚣 🚤 🚥 🚦 🚧 🚨 🚩 🚪 🚫 🚬 🚭 🚮 🚯 🚰 🚱 🚲 🚳 🚴 🚵 🚶 🚷 🚸 🚹 🚺 🚻 🚼 🚽 🚾 🚿 🛀 🛁 🛂 🛃 🛄 🛅 ⏩ ⏪ ⏫ ⏬ ⏰ ⏳ ⛎ ⛔ ⛲ ⛳ ⛵ ⛺ ⛽ ✁ ✂ ✃ ✄ ✅ ✆ ✇ ✈ ✉ ✊ ✋ ✌ ✍ ✎ ✏ ✐ ✑ ✒ ✓ ✔ ✕ ✖ ✗ ✘ ✙ ✚ ✛ ✦ ✱ ✼ ❇ ❒ ❝ ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿ ➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ ➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓ ➔ ➕ ➖ ➗ ➘ ➙ ➚ ➛ ➜ ➝ ➞ ➟ ➠ ➡ ➢ ➣ ➤ ➥ ➦ ➧ ➨ ➩ ➪ ➫ ➬ ➭ ➮ ➯ ➰ ➱ ➲ ➳ ➴ ➵ ➶ ➷ ➸ ➹ ➺ ➻ ➼ ➽  ➾ ➿

Jose Maria Acuña Morgado - Desarrollador Web