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

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;
}

Answer 2

我会在该元素上使用inline-flex，然后您可以使用弹性定位来居中。 justify-content: center; align-items: center;将水平和垂直居中。对于真正的圆，您还可以将border-radius更改为50％。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试更改代码，使其看起来像这样

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

并且

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

Answer 4

您可以使用flex：

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>

Answer 5

在“aside.social a span”中添加此内容，不需要任何其他内容：

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

Answer 6

尝试将position: absolute;添加到css

跟随margin-left: 20px，稍微玩一下像素直到你满意为止：）