Google Chat Icons

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<p class="chat">
fuck you :D test :) mongo ;) fick :'( asdf :-o dsffds :-/ asdf x-( jklö :( wurst B-) hans :P alter <3 push :-| :) goblog <3
</p>

CSS

body {
    margin:20px;
}

.chat {
    font-size:20px;
}

span[role="ex"],
span[role="e4"],
span[role="e9"],
span[role="e10"] {
    display:inline-block;
    font: 80% sans-serif;
    padding:0 2px;
    text-align:center;
    
    transition:all .85s ease-in-out;
}

span[role="ex"].go,
span[role="e4"].go,
span[role="e9"].go,
span[role="e10"].go {
    transform:rotate(90deg);
}

span[role="ex"]:hover,
span[role="e4"]:hover,
span[role="e9"]:hover,
span[role="e10"]:hover {
    animation: ex 1.05s 1 ease-in-out forwards;
}

@keyframes ex {
  0%, 50% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(90deg);
  }
}

span[role="e9"] {
    position:relative;
}

span[role="e9"]:first-letter {
    /*color:transparent;*/
}

/*span[role="e9"]:before,
span[role="e9"]:after {
    position:absolute;
    top:11px;
    left:5px;
    content:'';
    border-bottom-right-radius:50%;
    border-bottom-left-radius:50%;
    transform:rotate(-90deg);
    width:6px;
    height:6px;
    background:#8A8A8A;
    border:1px solid #000;
}

span[role="e9"]:after {
    top:4px;
    width:5px;
    height:5px;
}*/


span[role="e10"] {
    position:relative;
}

span[role="e10"]:after {
    position:absolute;
    top:4px;
    left:8px;
    z-index:-1;
    content:'';
    height:5px;
    width:7px;
    background:#FCCFD1;
}

JavaScript

/*(function( $ ) {
  $.fn.myPlugin = function() {

  };
})( jQuery );*/
    
    
var chat = $('.chat');

var emoticons = {
    1 : { text: ":)", regex: ":\\)", role: 'ex'},
    2 : { text: ":D", regex: "\:\D", role: 'ex'},
    3 : { text: ";)", regex: ";\\)", role: 'ex'},
    4 : { text: ":'(", regex: ":'\\(", role: 'e4'},
    5 : { text: ":·o", regex: ":-o", role: 'ex'},
    6 : { text: ":-/", regex: ":-/", role: 'ex'}, 
    7 : { text: "x-(", regex: "x-\\(", role: 'ex'}, 
    8 : { text: ":(", regex: ":\\(", role: 'ex'},
    9 : { text: "B-)", regex: "B-\\)", role: 'e9'},
    10 : { text: ":P", regex: ":P", role: 'e10'},
    11 : { text: "♥", regex: "&lt;3", role: 'ex'},
    12 : { text: ":-|", regex: ":-\\|", role: 'ex'}
};

$.each(emoticons, function(i, v) {
    var myregexp = new RegExp(v.regex, "gm");
    chat.html(chat.html().replace(myregexp, '<span role="' + v.role + '">' + v.text + '</span>'));
});
    
setTimeout(function() {
    $('span[role="ex"]').addClass('go');
    $('span[role="e4"]').addClass('go');
    $('span[role="e9"]').addClass('go');
    $('span[role="e10"]').addClass('go');
}, 550);