Fontawesome: Как контролировать высоту и ширину уложенных значков

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