显示表情符号最简单的方法就是复制和粘贴。你只需要一个应用程序或网站，让你可以复制表情符号的原生字符形式。一个很好的地方是Emojipedia。你可以使用Emojipedia搜索或浏览你要找的任何表情符号。一旦你找到了你的表情符号，有一个部分，你可以很容易地看到和复制表情符号。

有很多因素在影响内容相对于容器的偏移量，最简单的解决方法是在left属性上使用偏移量，以便正确对齐。
我试着做一个演示来推断你的初始条件。
我使用::before伪元素来呈现emoji内容，当一个给定的类被应用到该元素时，为了确保父<i>元素与伪元素对齐，我使用固定的高度和宽度来设置它的样式，并在根元素中设置字体大小，以便在使用rem时所有内容都能正确地设置样式。
下面是. box元素的样式：

.box{
  position: relative;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  display: inline-block;
  text-align: center;
}

position:relative，以便伪元素相对于其父元素绝对定位;大小是固定的，并且display: inline-block将确保父元素在布局方面仍然是内联的，但是也将考虑其宽度。
演示有3个按钮：

• 一个用于切换表情符号可见性
• 一个用于切换<i>元素（红色）和：：before元素（蓝色）的框轮廓
• 一个用于切换更好地对齐表情符号内容所需的偏移

我使用了top: 20%，我不得不承认这是任意的，无论如何，我非常肯定它应该在字体大小上很好地缩放。
需要注意的是，由于<i>元素将格式设置为斜体，因此我在伪元素（font-style: normal;）中对其进行了更改，以便emoji不会被拉伸（就像示例中显示的火焰）。
x一个一个一个一个x一个一个二个一个x一个一个三个一个