javascript - 当集成到我的博客中时，Emoji One 显得过大

Question

所以我整合了emoji one我的脚本 blog将所有 unicode 表情符号 转换为 emojis 来自 emoji one。它可以工作，但它过大并且与其他帖子冲突。

这是我用来集成的代码:

 $(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" />

还有一个工作 fiddle

这是 preview在我的博客上它看起来像什么。

尽管尽了最大努力，我还是无法让它以默认大小显示。

这是我博客的全部 code .

感谢任何帮助。

Answer 1

那是因为您在博客中的自定义 CSS 之后加载了 EmojiOne CSS，这使得 width:auto from EmojiOne CSS “工作".

所以将这一行放在自定义 CSS 之前:

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