我从事这方面工作太久了,还没有弄清楚如何将四个 Font Awesome 图标堆叠在一起。我已经达到了三个,但我希望我的图标看起来像这样 (对不起,糟糕的形象)
这是我的三个堆叠的 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;
}
最佳答案
将 .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>
关于html - 如何正确对齐堆叠的 Font-Awesome 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38276520/