icon fonts - replace character

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<div class="chat"> :( B)
</div>

CSS

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

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

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

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

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

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

@keyframes devil {
    0% {
      transform: scale(1, 1);
      color:rgba(0, 0, 0, .5);
    }
    10% { color:rgba(0, 120, 0, .5); }
    20% { color:rgba(0, 120, 120, .5); }
    30% { color:rgba(120, 120, 0, .5); }
    40% { color:rgba(0, 0, 120, .5); }
    50% {
      transform: scale(1.85, -1.85);
      color:rgba(120, 0, 0, .5);
    }
    100% {
      transform: scale(1, 1); 
      color:rgba(0, 0, 0, .5);
    }
}

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

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

.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;
}

JavaScript

(function($) {
  $.fn.emolicons = 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);
           ...