FontAwesome 5 图标堆栈与标准图标不一致

Question

我正在尝试排列 FontAwesome 5 帐户图标。有些品牌图标不可用，所以我使用堆栈来制作自己的图标。问题是，堆栈似乎没有以与标准图标相同的速率缩放，它们也没有与标准图标完全垂直排列。

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

代码笔： https://codepen.io/xd1936/pen/jXpqdy

如有任何帮助，我们将不胜感激！

Answer 1

从您的 css 中的 .fa-stack class 中删除 margin-top: 4px。

Answer 2

Herpy derp derp 我在测试其他东西时不小心把 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;
  }
}

工作正常。呃.

FontAwesome 5 图标堆栈与标准图标不一致

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

html

css

font-awesome

font-awesome-5