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

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

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

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

和

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

Answer 2

尝试将 position: absolute; 添加到 css

接着是 margin-left: 20px，稍微调整一下像素，直到您满意为止:)

Answer 3

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

我会在该元素上使用 inline-flex，然后您可以使用 flex 定位来居中。 justify-content: center; align-items: center; 将水平和垂直居中。您还可以将 border-radius 更改为 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>

Answer 5

你可以使用 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 6

在"aside.social a span"中添加这个，不需要其他的：

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

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

How to create a grey background for the social icon on the center?

html

css

icons

position

centering