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

### Output:

Welcome to this Emoji One :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 = emojione.toImage(original);
                $(this).html(converted);
            });
        });
    </script>