Conversion HTML Class

Using jQuery, this demo shows you how you can stick a class of .convert-emoji on any HTML element and automatically convert native unicode emoji and/or shortnames to images after page load.

<p class"convert-emoji">
    Welcome to this JoyPixels :snail: demo! 😄
    I hope you like what we've put together here for you. :thumbsup: :smile:
</p>
        

Required extras

To get this example working correctly we needed to include a few extra pieces, including:

• jQuery
• Custom JS (see below)

jQuery Snippet:

<script type="text/javascript">
     $(document).ready(function() {
        $(".convert-emoji").each(function() {
            var original = $(this).html();
            // use .shortnameToImage if only converting shortnames (for slightly better performance)
            var converted = joypixels.toImage(original);
            $(this).html(converted);
        });
    });
</script>