首先，我不确定为什么你不能在你的初始实现中将文本定位在背景图像上，并在文本中包含多色的自定义符号，除非有一些限制，比如HTML转义，你想在哪里使用你的图标。
<span>是一个内联元素，使用一些对齐样式（首先尝试使用inline-flex和justify-content: center;），它应该可以正常工作。存在用于定心元素的资源负载。
我已经把一个例子与一个不同的图标库：.

.background {
  background-image: url(http://www.nasa.gov/sites/default/files/thumbnails/image/northseabloom_oli2_2023165_lrg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  
  display: flex;
  flex-direction: column;
  
  height: 200px;
  width: 200px;
}

.background .text {
  color: white;
}

.background .icon {
  color: red;
}

.background .bottom-text {
  margin-top: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>

<div class="background">
  <p class="text">Hello icons <span class="icon"><i class="fa-solid fa-icons"></i></span>, inline on a background no less!</p>
    <p class="text bottom-text">Hello icons <span class="icon"><i class="fa-solid fa-icons"></i></span>, inline on a background no less!</p>
</div>

您的主要问题似乎是您使用了一个自定义HTML实体，在您的示例中是。我是否可以正确地假设您希望基于您的CSS content: "\e900";进行此操作？我的简短研究表明，为了使其工作，您需要扩展XHTML，而在您的示例中我没有看到这一点。这可能是图标未按预期呈现的原因。

如果你不需要替换常见的emoji unicode字符（例如&#x1f600 => smiley），你可以编写一个简单的图标注入脚本。

/**
* define your icons
* as object
*/

let icons = {
  'screaming': "https://camo.githubusercontent.com/26d09c4725b30d28f1d4b28ae161b685fa87d432912f0b7b6dd1e4fbe3cfe2bc/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f6e706d2f407376676d6f6a692f6e6f746f40302e322e302f7376672f31463633312e737667",
  "pleading": "https://camo.githubusercontent.com/dbb026248af889b4cfd2c8bfde4252958b18db090e30ae0e832bbf17cef35216/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f6e706d2f407376676d6f6a692f7477656d6f6a6940322e302e302f7376672f31463937412e737667"
}

/**
* query icon placeholders
* and inject images as defined in object
*/
let iconsInline= document.querySelectorAll('[data-icon]')
iconsInline.forEach(icn=>{
  let type = icn.dataset.icon;
  let img = document.createElement('img');
  let src = icons[type];
  img.src = src;
  img.classList.add('img-emoji', `img-emoji-${type}`)
  icn.append(img)
  
})

body{
  font-size:8vmin;
}

[data-icon]{
  display:inline-block;
  height:1em;
  width:1em;
  /** adjust baseline alignment */
  transform: translateY(0.13em);
}

<p><span data-icon="pleading"></span> One morning, when Gregor Samsa woke from <span data-icon="pleading"></span> troubled dreams, he found himself transformed in his bed into a <span data-icon="screaming"></span> horrible vermin.</p>

工作原理

您正在定义一个包含所有符号源及其标识符的对象：

let icons = {
  'screaming': "icon1.svg",
  'laughing': "icon2.svg",
}

类似于fontAwesome和其他图标库API，您可以通过为占位符元素设置可读/不言自明的标识符来指定图标类型。

<span data-icon="screaming"></span>

在本例中，我使用了一个数据属性而不是类名，以避免类名冲突和前缀的需要（例如：fa-icon-mame）。
现在我们可以用实际的图标替换占位符：

let iconsInline= document.querySelectorAll('[data-icon]')
iconsInline.forEach(icn=>{
  let type = icn.dataset.icon;
  let img = document.createElement('img');
  let src = icons[type];
  img.src = src;
  img.classList.add('img-emoji', `img-emoji-${type}`)
  icn.append(img)
})

您还可以采用这种方法来注入内联SVG。
然而，如果图标包含渐变、蒙版或剪辑路径，您可能会遇到麻烦。
要避免这些问题，您可以使用Danny '365CSI' Engelman's <load-file>本地Web组件将图标附加为shadow DOM元素。