对齐字体真棒图标（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- *类来找出一个持久的解决方案，但我确实提出了几种方法来实现这一点，这些方法虽然有点笨拙，但并不是非常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 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更改。希望有所帮助。