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

这是我得到的结果。

但是，我想将它稍微向右移动一点。我不知道怎么做？有什么方法可以将它向右移动一点吗？

- SSS

---

https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons，然后只需调整left和top属性即可。 - Enrique

Answer 1

好的，既然您已经对位置进行了自己的 CSS 设置，那么您只需要将 text-align 设置为 right，如下所示：

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

这里有一个工作示例

---

问题是，这看起来不太好。因此，以下是几个替代方案，以防对您有用：示例1，示例2

- musefan

---

这个可行，如何让它更清晰明了？比如说它看起来有些丑陋，怎么才能让它看起来好看一些呢？需要帮忙吗？ - SSS

@duddosai：是的，我尝试过了，但问题在于他们没有不透明的时钟图标（这就是问题所在）。为什么你不尝试一个不同的日历呢？也许像这样的，虽然我使用了绝对定位，这有时可能会有问题，特别是与不同的浏览器一起使用。你可以尝试使用内置的堆叠类，并像这样简单做。 - musefan

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>

- Azeez Kallayi

---

这很有帮助，但我想让它看起来好看，就像必须清晰明了一样。有什么可以做的吗？ - SSS