结合两个Font Awesome图标

Question

我正在尝试组合两个Font Awesome图标,以创建一个堆栈.我正在尝试合并fa-calendar和fa-clock-o图标.这是因为,我需要一个日期时间的图标.

所以,为了结合它们,我尝试了这个:

HTML

<span class="icon-stack">
   <i class="fa fa-calendar icon-stack-3x"></i>
   <i class="fa fa-clock-o icon-stack-1x"></i>
</span>

CSS

.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;
}

这就是我得到的结果.

但是,我想带一点点正确.我不知道怎么做？我能做些什么才能让它走向正确？

Answer 1

好吧,因为你已经为位置做了自己的CSS,你只需要设置text-align为right,如下所示:

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

这是一个有效的例子

问题是,这看起来不太好.所以这里有几个替代方案,以防它们对你有用:例1,例2