结合两个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;
}

Here is a working example

问题是，这看起来不太好。所以这里有几个替代方案，以防它们对您有用：Example 1，Example 2

Answer 2

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

.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;
    }
.right_align { padding-left:5px; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<span class="icon-stack">
   <i class="fa fa-calendar icon-stack-3x"></i>
   <i class="fa fa-clock-o icon-stack-1x right_align"></i>
</span>