JoyPixels Labs

version 6.6

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.

Input:

?
1
2
3
4
<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>

Output:

Welcome to this JoyPixels 🐌 demo! 😄 I hope you like what we've put together here for you. 👍 😄

Required extras

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

jQuery Snippet:

?
1
2
3
4
5
6
7
8
9
10
<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>