CSS 如何在 Font Awesome 中堆叠/重叠超过 2 个图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20353907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to stack/overlap more than 2 icons in Font Awesome?
提问by AMB
How to stack/overlap more than 2 icons in Font Awesome ?
如何在 Font Awesome 中堆叠/重叠超过 2 个图标？
I have managed to stack/overlap 2 icons like this.
我已经设法像这样堆叠/重叠 2 个图标。
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
http://jsfiddle.net/npLWz/ref: http://fontawesome.io/examples/#stacked
http://jsfiddle.net/npLWz/参考：http: //fontawesome.io/examples/#stacked
but when i try to stack/overlap 3 or more icons like this.
但是当我尝试像这样堆叠/重叠 3 个或更多图标时。
<span class="fa-stack fa-3x">
<i class="fa fa-square-o fa-stack-3x"></i>
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-square-o fa-stack-1x"></i>
</span>
Its getting messed up, any idea , how can i fix it ? and get 3 or more icons stacked/overlapped on each other.
它变得一团糟，任何想法，我该如何解决？并让 3 个或更多图标相互堆叠/重叠。
回答by Antony Smith
I had a similar issue and solved using some custom CSS.
我有一个类似的问题并使用一些自定义 CSS 解决了。
.icon-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.icon-stack-1x,
.icon-stack-2x,
.icon-stack-3x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.icon-stack-1x {
line-height: inherit;
}
.icon-stack-2x {
font-size: 1.5em;
}
.icon-stack-3x {
font-size: 2em;
}
Markup is therefore:
因此标记为：
<span class="icon-stack fa-3x">
<i class="fa fa-{{whatever icon 3}} icon-stack-3x"></i>
<i class="fa fa-{{whatever icon 2}} icon-stack-2x"></i>
<i class="fa fa-{{whatever icon 1}} icon-stack-1x"></i>
</span>
I decided rather than override fa-stack I'd duplicate so I can still use the original CSS if required.
我决定而不是覆盖我要复制的 fa-stack，因此如果需要，我仍然可以使用原始 CSS。
You can obviously play around with the font size, line height etc to suit your own requirements.
您显然可以根据自己的要求调整字体大小、行高等。
回答by Kaiser
Finally, a new feature from Font-Awesomewas released and now you can stack more than 2 icons:
最后，Font-Awesome发布了一项新功能，现在您可以堆叠 2 个以上的图标：
See the following link: https://fontawesome.com/how-to-use/on-the-web/styling/layering
请参阅以下链接：https: //fontawesome.com/how-to-use/on-the-web/styling/layering
回答by klodoma
This feature is currently provided by fontawesome.
此功能目前由fontawesome提供。
See: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
请参阅：https: //fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
