Emoji One appears Oversized when integrated in my blog

So I integrated the emoji one script in my blog to convert all the unicode emojis into the emojis from emoji one. It works but it is over-sized and collides with other posts.

This is the code I've used to integrate:

 $(window).load(function() {

   function convert() {
     var input = document.body.innerHTML;
     var output = emojione.unicodeToImage(input);
     document.body.innerHTML = output;
   }

   convert();
 });

img.emojione {
  /* Override any img styles to ensure Emojis are displayed inline*/
  margin: 0px !important;
  display: inline !important;
  min-width: 15px!important;
  min-height: 15px!important;
  vertical-align: middle;
}

<script src="//cdn.jsdelivr.net/emojione/2.0.0/lib/js/emojione.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/2.0.0/assets/css/emojione.min.css" />

And a working fiddle

Here's the preview on my blog how it looks like.

Despite trying my best I couldn't get it to display in its default size.

Here is my blog's entire code.

Any help is appreciated.

That's because you are loading the EmojiOne CSS after the Custom CSS in your blog which is making width:auto from EmojiOne CSS "working".

So put this line below before your Custom CSS:

<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/2.0.0/assets/css/emojione.min.css"/>