我正在尝试对齐一个网站的共享功能的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对齐到堆叠的图标？
解决方法
有一种方法来完成这个任务,最少使用新的CSS样式：
我们应该使用与twitter和Facebook相同风格的信封,我的意思是广场风格与信封广场类.并使所有锚点物品堆叠：
<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; }
结果将如下所示：
