FontAwesome - 手动堆叠

Question

我正在尝试手动堆叠 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/

如果有任何其他 alternative/easier 方法，我欢迎您提出建议。

Answer 1

看thisfiddle。我所做的是改变它，使你制作的 div 成为背景，它具有橙红色、大小和边框半径。然后正常的fa-soundcloud fa-1x fa-inverse在里面是白色的。可能需要调整尺寸和颜色，但在我看来这就是您要找的东西。

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

Answer 2

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

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

FontAwesome - 手动堆叠

FontAwesome - Manual Stacking

html

twitter-bootstrap

css

font-awesome