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

Question

所以我集成了emoji one script in my blog，将所有unicode emojis从emoji one转换为emojis。它有效，但它过大并且与其他帖子冲突。

这是我用来集成的代码：

 $(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 来自 [=16] =]EmojiOne CSS "working".

因此，请将此行放在自定义 CSS 之前：

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

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

Emoji One appears Oversized when integrated in my blog

html

javascript

css

tumblr

emojione