шрифта Высокие сложенные изображения в списке HTML

Question

Я пытаюсь использовать шрифт Потрясающих сложенные изображения в виде списка, как описано в примере странице http://fontawesome.io/examples/

Список:

<ul class="fa-ul"> 
    <li><i class="fa-li fa fa-check-square"></i>List icons</li> 
</ul> 

Stacked изображение:

<span class="fa-stack fa-lg"> 
    <i class="fa fa-camera fa-stack-1x"></i> 
    <i class="fa fa-ban fa-stack-2x text-danger"></i> 
</span> 

Я не могу правильно подобрать изображения, как вы можете видеть в этой скрипке:

https://jsfiddle.net/uqL4aLyj/

Кто-нибудь знает, как правильно выровнять его?

Спасибо заранее

Max

Answer 1

Это происходит потому, что .fa-stack класс применяет height, width и line-height из 2em в сложенном набор иконок. Быстрый способ гарантировать, что нестационарные значки выравниваются со сложными значками, заключается в том, чтобы обрабатывать ваши нестационарные значки как один из них.

Вы можете добиться этого пути изменения текущей разметки:

<li> 
    <i class="fa fa-camera-retro"></i> 
    text 
</li> 

To:

<li> 
    <span class="fa-stack"> 
    <i class="fa fa-camera-retro fa-stack-1x"></i> 
    </span> 
    text 
</li> 

Modified JSFiddle demo.

Answer 2

Примеры на странице fontawesome использует Stacked изображения вне упорядоченного/маркированного списка. Отделяет их тегом <br>.

<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> 
First item<br> 
<span class="fa-stack fa-lg"> 
    <i class="fa fa-camera fa-stack-1x"></i> 
    <i class="fa fa-ban fa-stack-2x text-danger"></i> 
</span> 
Second item