FontAwesome 5 图标堆栈与标准图标不一致
发布于2023-05-29 21:11 阅读(1267) 评论(0) 点赞(14) 收藏(3)
我正在尝试排列 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
任何帮助，将不胜感激！
解决方案
margin-top: 4px从 css 的 .fa-stack 类中删除。
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/528398/5251d7893fb5247bacaa/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力