对齐字体真棒图标(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; }

结果如下所示:

演示小提琴

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示例.

我不确定这是否能回答你的问题,但我希望这会有所帮助.