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