FontAwesome - 手动堆叠答案

【问题标题】：FontAwesome - Manual StackingFontAwesome - 手动堆叠
【发布时间】：2015-09-12 08:08:56
【问题描述】：

我正在尝试手动堆叠 Soundcloud 图标并将其显示在一个正方形上，就像使用 fa-facebook-square 一样，但我的 Soundcloud 图标是在正方形下创建的。

这是我目前的代码：

<div class="row">
    <ul style="list-style-type: none; margin: 0px; padding-left: 20px;">
        <li style="margin-bottom: 5px;">
             <div style="float: left; margin-right: 10px; width: 15px; text-align: center; color: #ff3a00">
                <i class="fa fa-square fa-1x" style="font-size: 14px; position: relative; z-index: 10"></i>
                <i class="fa fa-soundcloud fa-1x fa-inverse" style="font-size: 8px; position: absolute; z-index: 11; margin-top: 3px; margin-left: 1px"></i>
              </div>Soundcloud
        </li>
        <li style="margin-bottom: 5px;">
            <div style="float: left; margin-right: 10px; width: 15px; text-align: center; color: #3b5998;">
                <i class="fa fa-facebook-square"></i>
            </div>Facebook
        </li>
    </ul>
</div>

预览：http://jsfiddle.net/gvdr7889/

如果有任何其他替代/更简单的方法，我愿意接受您的建议。

【问题讨论】：

标签： html twitter-bootstrap css font-awesome

【解决方案1】：

不要设置margin-top 和margin-left，而是使用top 和left。我用了5px和7px，但是你可以调整它以获得你喜欢的定位。

http://jsfiddle.net/gvdr7889/1/

【讨论】：

在 jsfiddle 中看起来很酷，但是，在我的例子中，社交图标位于不同的部分，所以给它一个手动的顶部和左侧会搞砸。您还有什么建议吗？
总是在带有position: relative的父元素中显示图标，你应该很好。 jsfiddle.net/gvdr7889/2
或者，设置margin-top: -15px; margin-left: -5px;。 jsfiddle.net/gvdr7889/3

【解决方案2】：

看看this 小提琴。我所做的是更改它，以便您制作的 div 是背景，它具有橙红色、大小和边框半径。然后是白色的正常fa-soundcloud fa-1x fa-inverse。可能需要调整尺寸和颜色，但在我看来，这就是您要寻找的东西。

还有一个Github issue 请求正确的soundcloud-square 图标，我建议让他们知道你也想要它

【讨论】：