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

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

任何帮助将不胜感激！

Answer 1

从CSS的.fa-stack类中删除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;
  }
}

工作正常。 gh。

FontAwesome 5图标堆栈不与标准图标对齐

2 个答案: