字体真棒 - 堆叠和其他东西不起作用

Question

我正在使用Font Awesome制作类似“社交栏”的内容。这是问题所在，我可以在CSS中轻松完成圆圈（如图所示），但圆圈是常规的（偶数）所以我想通过Font Awesome方式（http://fontawesome.io/examples/#stacked）来做，但似乎它不适合我。 我在CSS中的方式：

在HTML文件中它看起来像这样：

<div class="social-box">
    <ul>
        <li><a href="#facebook"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#twitter"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#steam"><i class="fa fa-steam"></i></a></li>
    </ul>
</div>

CSS（我正在使用Sass）：

.social-box {
    background: $main-color;
    position: absolute;
    left: 0;
    bottom: 0;
    width: $sidebar-width;
    height: $sidebar-socialbox-size;
    ul {
        height: 100%;
        float: left;
        position: relative;
        padding-top: ($sidebar-socialbox-size - $sidebar-socialbox-height)/2;
        left: 50%;
        li {
            width: $sidebar-socialbox-height;
            height: $sidebar-socialbox-height;
            margin: 0 $sidebar-socialbox-padding;
            float: left;
            right: 50%;
            position: relative;
            a {
                width: 100%;
                height: 100%;
                display: block;
                text-decoration: none;
                i {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    display: block;
                    background: $main-color-2;
                    color: $main-color;
                    text-align: center;
                    font-size: $sidebar-socialbox-icon-size;
                    line-height: $sidebar-socialbox-height;
                }
                &:hover {
                    i {
                        background: $sidebar-socialbox-background-hover;
                    }
                }
            }
        }
    }
}

所以我把它添加到我的HTML文件中，现在它看起来像这样：

<div class="social-box">
        <ul>
            <li>
                <span class="fa-stack fa-lg">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                    <a href="#facebook"></a>
                </span>
            </li>
            <li>
                <span class="fa-stack fa-lg">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                    <a href="#twitter"></a>
                </span>
            </li>
            <li>
                <span class="fa-stack fa-lg">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-steam fa-stack-1x fa-inverse"></i>
                    <a href="#steam"></a>
                </span>
            </li>
        </ul>
</div>

编辑CSS文件：

.social-box {
    background: $main-color;
    position: absolute;
    left: 0;
    bottom: 0;
    width: $sidebar-width;
    height: $sidebar-socialbox-size;
    ul {
        height: 100%;
        float: left;
        position: relative;
        padding-top: ($sidebar-socialbox-size - $sidebar-socialbox-height)/2;
        left: 50%;
        li {
            width: $sidebar-socialbox-height;
            height: $sidebar-socialbox-height;
            margin: 0 $sidebar-socialbox-padding;
            float: left;
            right: 50%;
            position: relative;
            span {
                a {
                    width: 100%;
                    height: 100%;
                    display: block;
                    text-decoration: none;
                }
                i {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    display: block;
                    background: $main-color-2;
                    color: $main-color;
                    text-align: center;
                    font-size: $sidebar-socialbox-icon-size;
                    line-height: $sidebar-socialbox-height;
                }
                &:hover {
                    i {
                        background: $sidebar-socialbox-background-hover;
                    }
                }
            }
        }
    }
}

现在它看起来像这样：

为什么会发生这种情况？