Font5图标堆栈与标准图标不一致

margin-top: 4px 来自css中的.fa堆栈类。

我不小心把它忘了 margin-top

HTML:

<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js"></script>

<div id="accounts">
  <span class="fab fa-twitter-square fa-fw"></span>
  <span class="fab fa-facebook-square fa-fw"></span>
  <span class="fa-stack fa-2x">
    <span class="fas fa-square fa-stack-2x"></span>
    <span class="fab fa-keybase fa-stack-2x fa-inverse"></span>
  </span>
  <span class="fa-stack fa-2x">
    <span class="fas fa-square fa-stack-2x"></span>
    <span class="fas fa-anchor fa-stack-1x fa-inverse"></span>
  </span>
  <span class="fab fa-github-square fa-fw"></span>
</div>

CSS:

#accounts {
  width: 100%;
  margin: 2vh auto 0 auto;
  font-size: 4vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.fa-stack {
  margin-top: 4px;
  font-size: 2vw !important;
}

@media (max-width: 992px) {
  #accounts {
    font-size: 3em;
    margin-top: 4vh;
  }
  .fa-stack {
    font-size: .5em !important;
  }
}

@media (min-width: 1500px) {
  #accounts {
    font-size: 5em;
  }
  .fa-stack {
    font-size: .5em !important;
  }
}

很好。啊。