使用CSS将两个字体图标一个放在另一个上面

我想把两个字体图标一个放在另一个上面。因此，我可以将其用作：

<span class="icon1-on-icon2" />

是否可以定义CSS类来实现这一点？不允许在跨度内使用其他元素，例如：

<span class="stack">
   <span class="icon1"/>
   <span class="icon2" />
</span>

---

当然，为什么不使用：after和：before伪选择器

CSS

.font-icon {
  height: 40px;
  width: 20px;
}

.font-icon:after, .font-icon:before {
  color: white;
  content: '';
  display: block;
  font-family: 'your-font-icon';
  height: 20px;
  position: relative;
  width: 20px;
}

.font-icon:before {
  background: red;
  content: 'h';
}

.font-icon:after {
  background: blue;
  content: 'g';
}

HTML

<span class='font-icon'></span>

代码笔草图如下：

更新

要将它们放在彼此的顶部，只需将位置更改为绝对，在容器元素上放置一个相对值，并将after和before的top和left设置为0

例如：

---

希望有帮助

谢谢你的回答。我想把一个图标放在另一个图标上。如果我把你的答案改为“绝对”，那就是我要找的！是的，我刚刚用最新的草图给出了答案。很好！：）