无法在字体真棒图标之间创建空间

Question

我正试图在我的4 fa-icons之间留出一些空间，以便在整个页面中展开更多空间。我希望他们能够占据页面的 75％。 HTML和随附的CSS如下所示：

.fa-icons {
  padding: 15px;
  text-align: center;
}
.icon-background-face {
  color: #3b5998;
}
.fa-facebook {
  color: #fff;
}
.facebook i {
  margin-right: 100px;
}
.icon-background-twit {
  color: #00aced;
}
.fa-twitter {
  color: #fff;
}
.icon-background-tube {
  color: #bb0000;
}
.fa-youtube {
  color: #fff;
}
.icon-background-env {
  color: #000000;
}
.fa-envelope {
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="fa-icons">
  <span class="fa-stack fa-5x">
    <a href="" target="_blank">"
      <i class="fa fa-circle fa-stack-2x icon-background-face fa-fw"></i>
      <i class="fa fa-facebook fa-1x fa-stack-1x fa-fw"></i>
    </a>
  </span>
  <span class="fa-stack fa-5x">
    <a href="" target="_blank">
      <i class="fa fa-circle fa-stack-2x icon-background-twit fa-fw"></i>
      <i class="fa fa-twitter fa-1x fa-stack-1x fa-fw"></i>
    </a>
  </span>
  <span class="fa-stack fa-5x">
    <a href="" target="_blank">
      <i class="fa fa-circle fa-stack-2x icon-background-tube"></i>
      <i class="fa fa-youtube fa-1x fa-stack-1x"></i>
    </a>
  </span>
  <span class="fa-stack fa-5x">
    <a href="">
      <i class="fa fa-circle fa-stack-2x icon-background-env"></i>
      <i class="fa fa-envelope fa-1x fa-stack-1x"></i>
    </a>
  </span>
</div>

Answer 1

只需使用margin，就像这样：

.fa-stack {
    margin-right: 10px; <-- change accordingly
}

为最后一个div创建一个自定义类名，并添加margin-right: 0;以防止在该div之后产生不必要的边距。

Answer 2

您可以简单地为fa添加保证金，请参阅以下示例：

＆＃13;

＆＃13;

.fa-icons {
  padding: 15px;
  text-align: center;
}
.fa-icons span {
  margin: 0 20px;
}
.icon-background-face {
  color: #3b5998;
}
.fa-facebook {
  color: #fff;
}
.facebook i {
  margin-right: 100px;
}
.icon-background-twit {
  color: #00aced;
}
.fa-twitter {
  color: #fff;
}
.icon-background-tube {
  color: #bb0000;
}
.fa-youtube {
  color: #fff;
}
.icon-background-env {
  color: #000000;
}
.fa-envelope {
  color: #fff;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="fa-icons">
  <span class="fa-stack fa-5x">
    <a href="" target="_blank">"
      <i class="fa fa-circle fa-stack-2x icon-background-face fa-fw"></i>
      <i class="fa fa-facebook fa-1x fa-stack-1x fa-fw"></i>
    </a>
  </span>
  <span class="fa-stack fa-5x">
    <a href="" target="_blank">
      <i class="fa fa-circle fa-stack-2x icon-background-twit fa-fw"></i>
      <i class="fa fa-twitter fa-1x fa-stack-1x fa-fw"></i>
    </a>
  </span>
  <span class="fa-stack fa-5x">
    <a href="" target="_blank">
      <i class="fa fa-circle fa-stack-2x icon-background-tube"></i>
      <i class="fa fa-youtube fa-1x fa-stack-1x"></i>
    </a>
  </span>
  <span class="fa-stack fa-5x">
    <a href="">
      <i class="fa fa-circle fa-stack-2x icon-background-env"></i>
      <i class="fa fa-envelope fa-1x fa-stack-1x"></i>
    </a>
  </span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

codepen

fileinput

.fa-icons {
  text-align: center;
  width: 75%;
  display: table;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;  
}

.fa-icons>span{
  display: table-cell;
  vertical-align:top;
}


.icon-background-face {
  color: #3b5998;
}

.fa-facebook {
  color: #fff;
}

.icon-background-twit {
  color: #00aced;
}

.fa-twitter {
  color: #fff;
}

.icon-background-tube {
  color: #bb0000;
}

.fa-youtube {
  color: #fff;
}

.icon-background-env {
  color: #000000;
}

.fa-envelope {
  color: #fff;
}