Как поместить эмодзи поверх текста в HTML/JavaScript?

Самый простой способ отобразить смайлик — просто скопировать и вставить. Вам просто нужно приложение или веб-сайт, который позволяет копировать смайлики в их родной символьной форме. Отличное место для этого — Emojipedia. Вы можете использовать Emojipedia для поиска или просмотра любых смайликов, которые вы ищете. После того, как вы нашли свой смайлик, появится раздел, в котором вы можете легко увидеть и скопировать смайлик.

Существует множество факторов, влияющих на то, почему контент отображается со смещением относительно контейнера. Самый простой способ решить эту проблему — использовать смещение свойства left, чтобы оно было правильно выровнено.

Я попытался сделать демонстрацию, экстраполирующую ваши начальные условия.

Я использовал псевдоэлемент ::before для рендеринга содержимого эмодзи, когда к элементу применяется данный класс. В любом случае, чтобы убедиться, что родительский элемент <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;), чтобы смайлик не растягивался (как пламя, которое вы показали в своем примере).

Чтобы лучше показать, как этот макет масштабируется с размером шрифта, я также добавил ползунок диапазона, который будет изменять размер шрифта корневого элемента в режиме реального времени.

changeFontSize();

function toggleClassToBoxes(classname){
  document.querySelectorAll('.container > .box')
    .forEach(box => { box.classList.toggle(classname); });
}

function toggleClassToBoxesByNumber(classnamePrefix){
  document.querySelectorAll('.container > .box')
    .forEach(box => {
      const i = parseInt(box.textContent);
      const classname = `${classnamePrefix}-${i}`;
      box.classList.toggle(classname);
    });
}

function changeFontSize(range){
  if (!range)
    range = document.querySelector('.fontsize input');
  const value = `${range.value}px`;
  document.querySelector(':root').style.fontSize = value;
  document.querySelector('.fontsize label').textContent = `font-size: ${value};`;
}

:root{
  font-size: 80px;
}

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

.box.outline{
  outline: solid red 6px;
}

.emoji::before {
  position: absolute;
  font-style: normal;
  left: 0;
  right: 0;
}

.emoji.outline::before {
  outline: solid blue 3px;
}

.emoji.offset::before {
  left: -20%;
  /*
  This was overstating for the sake of evaluating any option
  padding: 0;
  margin: 0;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  */
}

.emoji-1::before{
  content: "😆";
}

.emoji-2::before{
  content: "😁";
}

.emoji-3::before{
  content: "🤣";
}
.emoji-4::before{
  content: "😂";
}

.fontsize{
  display: flex;
  gap: 20px;
}

.fontsize input{
  width: 50%;
}
button, input{
  cursor: pointer;
  padding: .5em 1em;
}

label{
  font-size: 24px;
}

<div class = "container">
  <i class = "box">1</i>
  <i class = "box">2</i>
  <i class = "box">3</i>
  <i class = "box">4</i>
</div>

<div>
  <div class = "buttonstripe">
    <button
      onclick = "toggleClassToBoxes('emoji');toggleClassToBoxesByNumber('emoji');"
      >Toggle Emojis</button>
    <button onclick = "toggleClassToBoxes('outline');">Toggle Outlines</button>
    <button onclick = "toggleClassToBoxes('offset');">Toggle Offset</button>
  </div>
  <div class = "fontsize">
    <input type = "range" oninput = "changeFontSize(this)" min = "0" max = "100" value = "80">
    <label>font-size</label>
  <div>
</div>