CodePen

HTML

            
              <div class="chat">
    :D 
    :) 
    ;) 
    :'( 
    :o 
    :/ 
    :(
    B)
    :P
    :|
    :beer:
    :devil: 
    :shoot:
    :coffee:  
    :thumbsup: 
    :angry:
    :ueber-happy:
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import url(http://weloveiconfonts.com/api/?family=fontelico);

/* fontelico */
[class*="fontelico-"]:before {
  font-family: 'fontelico', sans-serif;
}

*:after {
  position:absolute;
  top:0;
  right:0;
  content:'';
  z-index:-1;
  width:0;
  height:0;
}

body {
  margin:0;
  font: 1em sans-serif;
}

.chat {
  width:80%;
  margin:0 auto;
  padding:1em 0; 
}

span {
  position:relative;
  float:left;
  margin:.75em 1.15em;
  font-size:1.75em;
}

.go {
  animation:hey .55s 1 linear;
}

@keyframes hey {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.85, -1.85);
  }
  100% {
    transform: scale(1, 1); 
  }
}

/* 
 * Custom emo styling
 */
.fontelico-emo-devil {
  color:rgba(180, 0, 0, .9); 
}

.fontelico-emo-beer:after {
  box-shadow: 
    -.475em .75em 0 .275em rgba(220, 220, 0, 1),
    -.185em .675em 0 .175em rgba(220, 220, 0, 1)
  ;    
}

.fontelico-emo-coffee:after {
  box-shadow: 
    -.475em .78em 0 .235em rgba(222, 184, 135, 1),
    -.215em .715em 0 .155em rgba(222, 184, 135, 1)
  ;    
}

.fontelico-emo-shoot:after {
  border-radius: .15em;
  box-shadow: .315em .525em 0 .1em rgba(0, 0, 0, 1);    
}

.fontelico-emo-angry:after {
  border-radius: .15em;
  box-shadow: -.695em .455em 0 .085em rgba(0, 220, 0, .6);
  z-index: 2;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
               /**
  Icon Fonts - emocons.js jQuery plugin
  
  # What? #
  For my article "5 Use Cases for Icon Fonts" on CSS-Tricks. 
  http://css-tricks.com/five-use-cases-for-icon-fonts

  # 2012 by Tim Pietrusky
  # timpietrusky.com
**/

/* 
 * The chat emoticons in any container are converted 
 * into icon fonts (Fontelico) with emocons.js 
 * (https://raw.github.com/TimPietrusky/emocons/master/js/emocons.js)
 * and the icon font is served by weloveiconfonts.com
 */

(function($) {
  $.fn.emocons = function() {
    var emoticons = {
        1 : { text: "emo-happy", regex: ":\\)", emo : ":)"},
        2 : { text: "emo-grin", regex: "\:\D", emo : ":D"},
        3 : { text: "emo-wink", regex: ";\\)", emo : ";)"},
        4 : { text: "emo-cry", regex: ":'\\(", emo : ":'("},
        5 : { text: "emo-surprised", regex: ":o", emo : ":o"},
        6 : { text: "emo-displeased", regex: ":/", emo : ":/"}, 
        7 : { text: "emo-devil", regex: "\:devil\:", emo : ":devil:"}, 
        8 : { text: "emo-unhappy", regex: ":\\(", emo : ":("},
        9 : { text: "emo-sunglasses", regex: "B\\)", emo : "B)"},
        10 : { text: "emo-tongue", regex: ":P", emo : ":P"},
        11 : { text: "emo-beer", regex: ":beer:", emo : ":beer:"},
        12 : { text: "emo-sleep", regex: ":\\|", emo : ":|"},
        13 : { text: "emo-shoot", regex: "\:shoot\:", emo : ":shoot:"},
        14 : { text: "emo-coffee", regex: "\:coffee\:", emo : ":coffee:"},
        15 : { text: "emo-thumbsup", regex: "\:thumbsup\:", emo : ":thumbsup:"},
        16 : { text: "emo-angry", regex: ":angry:", emo : ":angry:"},
        17 : { text: "emo-laugh", regex: ":ueber-happy:", emo : ":uber-happy:"}
    };
    
    return $.each(this, function(i, v) {
      
      var el = $(this);
      
      /*
       * I need to do this because CodePen executes 
       * my JavaScript twice.
       */
      if (!el.hasClass('done')) {
        el.addClass('done');
          
        // Replace the emoticons
        $.each(emoticons, function(ii, vv) {
          var myregexp = new RegExp(vv.regex, "gm");
          
          el.html(el.html().replace(
            myregexp, 
            '<span class="fontelico-'+vv.text+' go" title="'+vv.emo+'"></span>'
          ));
        });
      
        // Handle mouseover
        $.each(el.find('span'), function(ii, vv) {
          $(this).mouseover(function() {
            var gemo = $(this);
            gemo.removeClass('go');
              
            setTimeout(function() {
              gemo.addClass('go');
            }, 150); 
          });
        });
      }
    });
  };
})(jQuery);

/*
 * Just some time to see the real characters. 
 */
setTimeout(function() {
  $('.chat').emocons();
}, 1200);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................