Resources

Javascript Emoji Handling

My site uses custom emojis, powered by simple img elements and 5 lines of Javascript. All you have to do is create an img element with the classes "[name]" and "emoji," and it'll set the appropriate image source and alt text for you.

Do note that you need to be aware of how you're naming your emoji images to both set the "[name]" class correctly and to create descriptive alt text.

I personally name my images like "skull-emoji.png" or "thumbs-up-emoji.png", but you can adjust the code to your preferred naming convention.

HTML input

<img class = "thumbs-up emoji">

            

Javascript

var emojis = document.getElementsByClassName('emoji');

for (var i = 0; i < emojis.length; i++) {

    // Gets emoji class list and finds emoji name
    var emojiName = emojis[i].classList[0];
    // Change the "-" to however you separate words in your file names
    emojiText = emojiName.replace("-", " ");

    // Sets img src and alt text based on emoji class name
    // Change the '/i/emoji/' to your (emoji) image folder path
    emojis[i].src = '/i/emoji/' + emojiName + '.png';
    emojis[i].alt = 'pixelated ' + emojiText + ' emoji';
};
            

HTML result

<img class = "thumbs-up emoji" src="/i/emoji/thumbs-up.png" alt="pixelated thumbs up emoji">

            

Have fun with all the time saved from typing!