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:
<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 :snail: demo! 😄 I hope you like what we've put together here for you. :thumbsup: :smile:
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>