February 16, 2014 2:42 pm

How to create Emoticons with CSS & jQuery Plugin

We use emoticons all the time in our chat conversions, messaging, comments and even in our emails to show that your feelings through some symbols like smile, sad and laugh etc. So this tutorial is all about emoticons using this tutorials demo and download code you can show your emoticons in your web projects very easily. We use a jQuery plugin with CSS to perform this task and make it very simple and easy to understand for our readers.

How to create emoticons with CSS & jQuery Plugin

Let’s explain it and use it in our websites comments start with a smile 🙂

Used a jQuery plugin Oleg Slobodskoi its a very simple to integrate and string based parser  and very dynamic where you can add your own emoticons keywords, and any thing in emoticons you want to you can do.

Here is the list of all emoticons supported by this plugin.

Basically it replace your symbols with a graphic image using CSS class for each icon there is a separate class when we write a text with symbols ( “:)”, “:D” ) it uses regular expression to find these emoticons and replace them with a span with emoticon class.

We have created its demo on demo.phpgang.com where you can test its functionality live.

Include CSS and jQuery Libraries:

We have included CSS and jQuery library for emoticons.

jQuery initializing the plugin:

This jQuery initialize Plugin and serve you emoticons on your posted comments. var definition define all emoticons in this which can be replaced on text submission here is only few, in our demo define all emoticons defined.

All together in HTML:

This is the complete code of our demo I hope it helps you with a smile 🙂

Please don’t forget to give us your feedback in comments.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.

Tutorial Categories:
  • Thats great 🙂 How about http://js-emotifier.appspot.com ?

  • Frank

    Hello there. Nice script. I’ve tried implementing it into my shout box but i’ve been having some problems with the javascript. How do I go about adding it to my shout messages? i can get them to display, but not append to the smilies in the posts. this is how the data is posted:

    $(“#shout_message”).keypress(function(evt) {
    if(evt.which == 13) {
    var iusername = $(‘#shout_username’).val();
    var imessage = $(‘#shout_message’).val();
    var textWithEmoticons = $.emoticons.replace(imessage);
    post_data = {‘username’:iusername, ‘message’:imessage};
    $.post(‘includes/shout.php’, post_data, function(data) {

    any ideas? 🙂

    • huzoorbux

      Here is your problem

      post_data = {'username':iusername, 'message':imessage};

      replace with "post_data = {'username':iusername, 'message':textWithEmoticons};"

      You are sending simple text in your post send textWithEmoticons variable.

  • tom

    how to replace all smiles on a Page?



  • mmk

    Hello Huzoor,

    thank you very much, that’s fantastic!

    Am I allowed to use this in an commercial app?

    Kind regards from Germany,
    Martina Maria

    • You can use it in commercial app.

      • mmk

        Great, thanks again!