分类导航

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 对齐字体带堆叠图标(fa-stack)的Awesome图标(fa-2x)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在尝试对齐一个网站的共享功能的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>

除此之外,我们改变了堆叠元素之间的余量,使它们看起来像你的例子：