Fontawesome: How to Control the Height and Width of Folded Icons

Question

I am trying to embed nested icons in a string that doubles the width and height of the folded icons.

<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;
}

So, if the height of the icon is 169px, then after laying it becomes 338px. How can I solve it?

I somehow controlled the width span by setting the width to 13vw explicitly. But this hack does not work at height.

Here is an example.

Answer 1

Try adding these rules to the stack style class.

height: 13vw;vertical-align: super;

your code will look like this

<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