css – Fontawesome：如何控制堆叠图标的高度和宽度

2023年2月16日 261次阅读

我试图连续堆叠图标,这是堆叠图标的宽度和高度加倍.

<div class="large">
    Fl<span class="fa-stack" style="width: 13vw; vertical-align: middle"><i class="fa fa-circle fa-stack-1x round"></i><i class='fa fa-lightbulb-o bulb fa-stack-1x'></i></span>ating
    <br/>R<i class='fa fa-circle round'></i>und <br/>Butt<i class='fa fa-circle round'></i>n
</div>

CSS

.large{
    color: #6a9ca7;
    font-size: 13vw;
    text-transform: uppercase;
    text-align: center; 
    vertical-align: middle;
}

因此,如果图标的高度为169px,那么在堆叠后它将变为338px.我该如何解决？

我通过明确地将宽度设置为13vw来控制宽度间距.但是这个黑客并没有在高度上工作.

这是example.

最佳答案 尝试将这些规则添加到堆栈样式类

height: 13vw;vertical-align: super;

你的代码看起来像这样

<div class="large">
Fl<span class="fa-stack" style="width: 13vw; height:13vw; vertical-align: super;"><i class="fa fa-circle fa-stack-1x round"></i><i class='fa fa-lightbulb-o bulb fa-stack-1x'></i></span>ating
<br/>R<i class='fa fa-circle round'></i>und <br/>Butt<i class='fa fa-circle round'></i>n
点赞