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/

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

Answer 1

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

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

Answer 2

看看this小提琴。我所做的就是改变它，这样你制作的div就是背景，它有橙红色，大小和边框半径。然后是白色的正常fa-soundcloud fa-1x fa-inverse。可能需要玩大小和颜色，但在我看来，这就是你正在寻找的。

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

FontAwesome - 手动堆叠

2 个答案: