如何正确对齐堆叠的字体 - 真棒图标

我一直在这里的时间太长了，还没有弄清楚如何在彼此之上堆叠四个字体真棒图标。我已经得到了三个，但我想我的图标看起来像这样（对不起，因为糟糕的图像）如何正确对齐堆叠的字体 - 真棒图标

这里是我的三个堆叠的HTML。

<span class="fa-stack fa-4x"> 
<i class="fa fa-circle fa-stack-2x icon-background4"></i> 
<i class="fa fa-circle-thin fa-stack-2x icon-background6"></i> 
<i class="fa fa-cutlery fa-inverse fa-stack-1x"></i> 
</span>

的CSS

.icon-stack-1x { 
    line-height: inherit; 
} 
.icon-stack-2x { 
    font-size: 1.5em; 
}

来源

2016-07-08 Pauline Orr

上.fa-cutlery和.fa-inverse设置display:flex到.fa-circle-thin

和background-color到span

body { 
 
    background: red 
 
} 
 
span { 
 
    background: black; 
 
    border-radius: 100% 
 
} 
 
.fa-cutlery { 
 
    display: flex 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<span class="fa-stack fa-4x"> 
 
    <i class="fa fa-circle fa-stack-2x"></i> 
 
    <i class="fa fa-circle-thin fa-stack-2x fa-inverse"></i> 
 
    <i class="fa fa-cutlery fa-inverse fa-stack-1x"></i> 
 
</span>

来源

2016-07-08 23:06:37 dippas

查看更新回答:) – dippas

哦真棒。我想澄清，因为我正在尝试这一点。当你说flex放在.fa-inverse上.fa-circle-thin这意味着什么？只是想澄清。 –

我说过：在'.fa-cutlery' **和**（添加/设置类）'.fa-inverse'（到有图标的类）上设置'display：flex'（property）''.fa-circle -thin' – dippas

如何正确对齐堆叠的字体 - 真棒图标

回答

相关问题