将Font Awesome图标（fa-2x）与堆叠图标（fa-stack）对齐

Question

我试图将一个网站的共享功能中的4个图标排成一行。当我使用了4个普通图标时，它们完美地对齐并且大小相同。现在我想让其中一个图标带有边框并堆叠起来，这会导致一些问题。

下面是我一直在尝试的代码：

<div class="share-results">
  <a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#"></a>
  <a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href=""></a>
  <a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href=""></a>
  <a class="fa fa-2x fa-stack" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-link fa-stack-1x"></i>
  </a>
</div>

这将创建：

看起来只是一个尺寸的问题，所以我试着使用fa-lg进行调整：

还有在堆叠元素上没有任何尺寸帮助器的情况下：

有人知道如何将带有fa-2x的图标与堆叠图标对齐吗？

- Tom Prats

---

你不能在CSS中明确设置.fa-stack的宽度、高度和边距吗？ - MannfromReno

@MannfromReno，那似乎是一个可能的解决方案（我正在尝试），但我想要一个更干净、可重用且更稳定的解决方案。 - Tom Prats

Answer 1

有一种方法可以用最少的新CSS样式来完成这个任务：

我们应该使用与Twitter和Facebook相同风格的信封，我指的是带有fa-envelope-square类的方形风格。并使所有锚点项堆叠在一起：

<div class="share-results">
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#">
        <i class="fa fa-envelope-square fa-stack-2x"></i>
    </a>
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href="">
        <i class="fa fa-facebook-square fa-stack-2x"></i>
    </a>
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href="">
        <i class="fa fa-twitter-square fa-stack-2x"></i>
    </a>
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#">
        <i class="fa fa-square fa-stack-2x"></i>
        <i class="fa fa-inverse fa-link fa-stack-1x"></i>
    </a>
</div>

除此之外，我们还更改了堆叠元素之间的边距，使它们看起来像您的示例：

.fa-stack { margin: -2px; }

结果将会是这样:

演示示例

- Ivan Gerasimenko

Answer 2

我无法仅使用fa-*类找到一个持久的解决方案，但我想出了一些方法来实现这一点，虽然有点hacky，但并不是非常hacky。

第一种方法是将fa-link图标作为文本叠加在普通的fa fa-2x fa-square-o图标上。

<div class="share-results">
  <a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top"></a>
  <a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top"></a>
  <a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top"></a>
  <a class="fa fa-2x fa-square-o stacked" data-toggle="tooltip" title="Share by Link" data-placement="top"></a>
</div>

<style>
    .stacked {
        position:relative;
    }   
    .stacked:after {
        position: absolute;
        font-family: FontAwesome;
        font-size: .6em;
        top:6px;
        left:4px;
        content: "\f0c1"; /*link icon*/
    }
</style>

第二种方法使用position: fixed和自定义的font-size的组合，以帮助新链接略微更好地对齐：

<div class="share-results">
  <a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top"></a>
  <a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top"></a>
  <a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top"></a>
  <a class="fa fa-2x fa-stack stacked2" data-toggle="tooltip" title="Share by Link" data-placement="top">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-link fa-stack-1x"></i>
  </a>
</div>

<style>
    .stacked2 {
      position: fixed;
      font-size: 1.1em !important;
      top: -7px;
      left: -4px;
    }
</style>

第二种方法更加准确，但是我包含了第一种方法以便您可以自己尝试。它们的最终结果分别如下：

这里有一个 CodePen示例。

我不确定这是否回答了你的问题，但希望能对你有所帮助。

- alex

Answer 3

由于字体awesome图标都与宽度、高度和行高有关，所以我尝试创建一个解决方案，使它们的值都相同（希望）避免混淆并且更容易更新。

使用您提供的示例，我设置了以下CSS属性：

.fa {
    /*this sets values for all icons*/
    color: gray;
    font-size: 50px;
    line-height: 55px;
    text-decoration: none;
}
.fa-link {
    /*make inner icon smaller but keep line-height the same so its centered vertically*/
    font-size: 30px;
}
.fa-stack-cust {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 55px;
}

我将图标放在无序列表中，它们现在都显示在同一行。这里是JS.Fiddle，展示了一个工作的例子。即使它们只是微小的HTML更改，你也能看到它们。希望这可以帮助你。

- crazymatt