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

bad centered icon

我需要建立这样的一个：

good centered icons

这里是我的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%; 
}

来源

2017-06-01 Nazariy Mural

你不需要两个单独的元素，你可以在你的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; 
}

来源

2017-06-01 14:37:48 Angie

非常感谢。您的回答正常工作。我会在几分钟内提交 –

试着改变你的代码，以便它看起来像这样

span { 
    display: block; 
    text-align: center; 
    line-height: 25px 
}

而且

a { 
    width: 25px; 
    height: 25px; 
    display: inline-block; 
}

来源

2017-06-01 14:36:23 Fiffe

你忘记了垂直对齐。 – Angie

你是对的，我修好了 – Fiffe

-2

尝试添加position: absolute;的CSS

其次margin-left: 20px，随着像素的发挥很少，直到你满意:)

来源

2017-06-01 14:36:24 OmerM25

我会在该元素上使用inline-flex，然后您可以使用柔性定位居中。 justify-content: center; align-items: center;将水平和垂直居中。您也可以将边框半径更改为50％以获得真圆。

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

 
aside.social a span { 
 
    width: 25px; 
 
    height: 25px; 
 
    background-color: #aaa; 
 
    border-radius: 50%; 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<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>

来源

2017-06-01 14:39:42

您可以使用柔性：

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

 
aside.social a span { 
 
    display: inline-flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 25px; 
 
    height: 25px; 
 
    background-color: #aaa; 
 
    border-radius: 40%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
 
<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>

来源

2017-06-01 14:44:28 Eugene

在 “aside.social跨度” 添加这个，没有别的要求：

text-align:center; 
padding-top:8px;

来源

2017-06-01 15:13:38 Sunny

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

回答

相关问题