[英]How to align stacked Font-Awesome icons correctly
I have been at this for way too long and have yet to figure out how to stack four font-awesome icons on top of each other.我已经在这方面待了太久了,还没有弄清楚如何将四个字体很棒的图标堆叠在一起。 I've gotten to three but I am wanting my icons to look like this
我已经到了三个,但我希望我的图标看起来像这样
(sorry for crummy image)
(对不起,糟糕的图像)
Here's the HTML for my three stacked.这是我的三个堆叠的 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>
The CSS CSS
.icon-stack-1x {
line-height: inherit;
}
.icon-stack-2x {
font-size: 1.5em;
}
set display:flex
on .fa-cutlery
and .fa-inverse
to .fa-circle-thin
将
display:flex
on .fa-cutlery
和.fa-inverse
为.fa-circle-thin
and background-color
to span
和
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.