惊人的堆叠对齐问题

我使用了Fontawesome网站上的代码示例来创建两个堆叠的社交媒体按钮, 并将其包装在div中, 以将其浮动到页面的右侧。

<div class="social-icons">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x icon-background"></i> 
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i></span> 
<span class="fa-stack fa-lg"> 
<i class="fa fa-circle fa-stack-2x icon-background"></i> 
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i> 
</span>
</div>

尽管采用了http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome的样式, 但图标和它应该对齐的圆圈似乎是顶部对齐, 而不是中间对齐。 css。

#1

你在头标之间使用过此标签吗？

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">

那我认为你的价值观是不正确的

<i class="fab fa-stack-overflow"></i>
<i class="fas fa-circle"></i>
......

从fontawesome网站检查所有内容, 然后使用fontawesome CDN：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">