Question

我正在尝试将堆叠的图标连成一行，这样可以使堆叠图标的宽度和高度加倍。

<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。

Answer 1

尝试将这些规则添加到堆栈样式类

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

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

1 个答案: