html - 如何为中心的社交图标创建灰色背景？

Question

我的图标是这样的:

我需要这样创建:

这是我的 HTML:

<aside class="social">
        <a href="https://www.instagram.com/" class="inst"><span><i class="fa fa-instagram" aria-hidden="true"></i></span></a>
        <a href="https://www.facebook.com" class="facb"><span><i class="fa fa-facebook" aria-hidden="true"></i></span></a>
        <a href="https://www.pinterest.com/" class="pint"><span><i class="fa fa-pinterest" aria-hidden="true"></i></span></a>
    </aside>

这是我的 CSS:

aside.social a {
    margin-left: 10px;
    color: #fff;
    font-size: 16px;
}

aside.social a span {
    width: 25px;
    display: inline-block;
    height: 25px;
    background-color: #aaa;
    border-radius: 40%;
}

Answer 1

你不需要两个单独的元素，你可以在你的 a 上完成这一切，里面有一个 i.fa。

aside.social a {
    color: #fff;
    background: #aaa;
    margin-left: 10px;
    border-radius: 40%;
    width: 25px;
    height: 25px;
    line-height: 25px; /* vertical alignment */
    text-align: center;
    font-size: 16px;
}