Css 组合两个字体图标

我正在尝试将两个很棒的字体图标组合起来，以创建一个堆栈。我正在尝试合并

fa日历

和

fa-clock-o

图标。这是因为，我需要一个日期时间图标

因此，为了将它们结合起来，我尝试了以下方法：

HTML

这就是我得到的结果

---

但是，我想让事情变得更正确一点。我不知道怎么做？我该怎么做才能使它稍微向右移动？

您可以通过添加新类使时钟向右对齐或向左填充 请参阅以下代码：

。图标堆栈{
位置：相对位置；
显示：内联块；
宽度：2米；
身高：5公分；
线高：4em；
垂直对齐：中间对齐；
}
.icon-stack-1x，
.icon-stack-2x，
.icon-stack-3x{
位置：绝对位置；
左：0；
宽度：100%；
文本对齐：居中；
}
.icon-stack-1x{
行高：继承；
}
.icon-stack-2x{
字号：1.5em；
}
.icon-stack-3x{
字号：2em；
}
.right_align{padding left:5px；}

---

好的，由于您已经为position创建了自己的CSS，您只需将

文本对齐设置为
右侧
，如下所示：

.icon-stack-3x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: right;
}



问题是，这看起来不太好。因此，这里有几个备选方案，以防它们对您有用：，
这很有帮助，但我希望它看起来不错，就像它必须清晰一样。可以做什么？这是有效的，我怎样才能说得更清楚？（为了好看，看起来有点难看。）。有什么帮助吗？@duddosai:是的，我试过了，但问题是他们没有不透明的时钟图标（这就是问题所在）。你为什么不试试别的日历呢？虽然我确实使用了绝对位置，这有时会有问题，尤其是在不同的浏览器中。您可以尝试使用内置的堆叠类，然后只使用left和top属性
.icon-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 5em;
  line-height: 4em;
  vertical-align: middle;
}
.icon-stack-1x,
.icon-stack-2x,
.icon-stack-3x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.icon-stack-1x {
  line-height: inherit;
}
.icon-stack-2x {
  font-size: 1.5em;
}
.icon-stack-3x {
  font-size: 2em;
}

.icon-stack-3x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: right;
}