将 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 的图标与堆叠的图标对齐？

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

结果如下所示：

Demo fiddle

Answer 2

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

第一种方法将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 example。

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

Answer 3

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

使用您提供的示例，我设置了这些 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;
}

我将图标包装在一个无序列表中，现在它们都显示在同一行上。 Here is the JS.Fiddle showing you a working example。即使它们很小，您也将能够看到 HTML 更改。希望对您有所帮助。