Unicode chars dynamically rendered with PNG files
example.html - link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Emoji</title>
<script type="text/javascript" src="js/jquery/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/emoji.js"></script>
</head>
<body>
<div class="emoji">
😄😍😨🔥💩👍🏃🐨🐍⛳🎀🎩👑👒🌂💼👜💄💍💎🇫🇷🇪🇸🇮🇹🇷🇺🔞♊🔲❌©
</div>
<script type="text/javascript">
$('.emoji').emoji(32); // Set the size for rendering here
</script>
</body>
</html>
js/emoji.js - link
// JavaScript Document
var emoji = Array("😄", "😊", "😃", "☺", "😉", "😍", "😘", "😚", "😳", "😌", "😁", "😜", "😝", "😒", "😏", "😓", "😔", "😞", "😖", "😥", "😰", "😨", "😣", "😢", "😭", "😂", "😲", "😱", "😠", "😡", "😪", "😷", "👿", "👽", "💛", "💙", "💜", "💗", "💚", "❤", "💔", "💓", "💘", "✨", "🌟", "💢", "❕", "❔", "💤", "💨", "💦", "🎶", "🎵", "🔥", "💩", "👍", "👎", "👌", "👊", "✊", "✌", "👋", "✋", "👐", "👆", "👇", "👉", "👈", "🙌", "🙏", "☝", "👏", "💪", "🚶", "🏃", "👫", "💃", "👯", "🙆", "🙅", "💁", "🙇", "💏", "💑", "💆", "💇", "💅", "👦", "👧", "👩", "👨", "👶", "👵", "👴", "👱", "👲", "👳", "👷", "👮", "👼", "👸", "💂", "💀", "👣", "💋", "👄", "👂", "👀", "👃", "☀", "☔", "☁", "⛄", "🌙", "⚡", "🌀", "🌊", "🐱", "🐶", "🐭", "🐹", "🐰", "🐺", "🐸", "🐯", "🐨", "🐻", "🐷", "🐮", "🐗", "🐵", "🐒", "🐴", "🐎", "🐫", "🐑", "🐘", "🐍", "🐦", "🐤", "🐔", "🐧", "🐛", "🐙", "🐠", "🐟", "🐳", "🐬", "💐", "🌸", "🌷", "🍀", "🌹", "🌻", "🌺", "🍁", "🍃", "🍂", "🌴", "🌵", "🌾", "🐚", "🎍", "💝", "🎎", "🎒", "🎓", "🎏", "🎆", "🎇", "🎐", "🎑", "🎃", "👻", "🎅", "🎄", "🎁", "🔔", "🎉", "🎈", "💿", "📀", "📷", "🎥", "💻", "📺", "📱", "📠", "☎", "💽", "📼", "🔊", "📢", "📣", "📻", "📡", "➿", "🔍", "🔓", "🔒", "🔑", "✂", "🔨", "💡", "📲", "📩", "📫", "📮", "🛀", "🚽", "💺", "💰", "🔱", "🚬", "💣", "🔫", "💊", "💉", "🏈", "🏀", "⚽", "⚾", "🎾", "⛳", "🎱", "🏊", "🏄", "🎿", "♠", "♥", "♣", "♦", "🏆", "👾", "🎯", "🀄", "🎬", "📝", "📖", "🎨", "🎤", "🎧", "🎺", "🎷", "🎸", "〽", "👟", "👡", "👠", "👢", "👕", "👔", "👗", "👘", "👙", "🎀", "🎩", "👑", "👒", "🌂", "💼", "👜", "💄", "💍", "💎", "☕", "🍵", "🍺", "🍻", "🍸", "🍶", "🍴", "🍔", "🍟", "🍝", "🍛", "🍱", "🍣", "🍙", "🍘", "🍚", "🍜", "🍲", "🍞", "🍳", "🍢", "🍡", "🍦", "🍧", "🎂", "🍰", "🍎", "🍊", "🍉", "🍓", "🍆", "🍅", "🏠", "🏫", "🏢", "🏣", "🏥", "🏦", "🏪", "🏩", "🏨", "💒", "⛪", "🏬", "🌇", "🌆", "🏯", "🏰", "⛺", "🏭", "🗼", "🗻", "🌄", "🌅", "🌃", "🗽", "🌈", "🎡", "⛲", "🎢", "🚢", "🚤", "⛵", "✈", "🚀", "🚲", "🚙", "🚗", "🚕", "🚌", "🚓", "🚒", "🚑", "🚚", "🚃", "🚉", "🚄", "🚅", "🎫", "⛽", "🚥", "⚠", "🚧", "🔰", "🏧", "🎰", "🚏", "💈", "♨", "🏁", "🎌", "🇯🇵", "🇰🇷", "🇨🇳", "🇺🇸", "🇫🇷", "🇪🇸", "🇮🇹", "🇷🇺", "🇬🇧", "🇩🇪", "1⃣", "2⃣", "3⃣", "4⃣", "5⃣", "6⃣", "7⃣", "8⃣", "9⃣", "0⃣", "#⃣", "⬆", "⬇", "⬅", "➡", "↗", "↖", "↘", "↙", "◀", "▶", "⏪", "⏩", "🆗", "🆕", "🔝", "🆙", "🆒", "🎦", "🈁", "📶", "🈵", "🈳", "🉐", "🈹", "🈯", "🈺", "🈶", "🈚", "🈷", "🈸", "🈂", "🚻", "🚹", "🚺", "🚼", "🚭", "🅿", "♿", "🚇", "🚾", "㊙", "㊗", "🔞", "🆔", "✳", "✴", "💟", "🆚", "📳", "📴", "💹", "💱", "♈", "♉", "♊", "♋", "♌", "♍", "♎", "♏", "♐", "♑", "♒", "♓", "⛎", "🔯", "🅰", "🅱", "🆎", "🅾", "🔲", "🔴", "🔳", "🕛", "🕐", "🕑", "🕒", "🕓", "🕔", "🕕", "🕖", "🕗", "🕘", "🕙", "🕚", "⭕", "❌", "©", "®", "™");
function to_hex(str) {
var hex, i;
hex = '';
for(i=0; i < str.length; i++) {
hex += str.charCodeAt(i).toString(16);
}
return hex;
}
$.fn.emoji = function (size) {
return this.each(function () {
$(this).html(function (i, oldHtml) {
var newHtml;
for (var j = 0; j < emoji.length; j++) {
// For block/background style
// oldHtml = oldHtml.replace(emoji[j], '<span style="display: inline-block; background-image: url(img/' + to_hex(emoji[j]) + '.png); background-size: ' + size + 'px; height: ' + size + 'px; width: ' + size + 'px;"></span>');
// For classic img style
oldHtml = oldHtml.replace(emoji[j], '<img src="img/' + to_hex(emoji[j]) + '.png" height="' + size + '" width="' + size + '" />');
}
newHtml = oldHtml;
return newHtml;
});
});
};