FontAwesome 5 Icon Stacks Don't Line Up with Standard Icons

Question

I'm trying to line up FontAwesome 5 account icons. Some brand icons are not available, so I'm using stacks to make my own. The problem is, the stacks don't seem to scale at the same rate as the standard icons, nor do they line up quite right vertically with the standard icons.

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

Codepen: https://codepen.io/xd1936/pen/jXpqdy

Any help would be appreciated!

Answer 1

Herpy derp derp I accidentally left that margin-top in there from testing something else. 🤦

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

Works fine. Ugh.

Answer 2

Remove the margin-top: 4px from the .fa-stack class in your css.