Нужна помощь в укладке шрифтов - удивительные значки

Question

Недавно я обновил версию font-awesome от 3.2.1 до 4.

Я имел эту работу в 3.2.1

<li><span class="icon-stack stacked"><i class="icon-circle icon-stack-base"></i><i class="icon-phone icon-2x icon-light"> 
</i></span><span class="stacktext">Your Phone Number</span></li> 

.stacked 
{ 
    float: left; 
    margin-right: 15px; 
    color: #3ECCFC; 
} 

.stacktext 
{ 
    text-align:left; 
    font-size: 14px; 
    color: #444444; 
} 

Но это не суммируется до хорошо version 4.

<li><span class="fa fa-stack stacked"><i class="fa fa-circle fa fa-stack-base"></i><i class="fa fa-phone icon-2x fa fa-light"> 
     </i></span><span class="stacktext">Your Phone Number</span></li> 

Answer 1

Вы только должны использовать класс fa один раз в class="". Я обновил несколько бит в коде.

Определите размер основного стека в <span> вокруг элементов <i>. stacked устарел в Font Awesome 4, так как fa-stack определяет стек. Также fa-light изменен на fa-inverse. Наконец, fa-stack-1x и fa-stack-2x используются для масштабирования значков в стеке. fa-stack-2x будет использоваться для создания значка большего размера по сравнению с другим значком в стеке.

Все вместе взятые результаты в:

<li> 
    <span class="fa-stack fa-2x"> 
     <i class="fa fa-circle fa-stack-2x"></i> 
     <i class="fa fa-phone fa-stack-1x fa-inverse"></i> 
    </span> 
    <span class="stacktext">Your Phone Number</span> 
</li> 

Пожалуйста, проверьте примеры стеков данных на веб-сайте Потрясающие шрифта: Stacks.

Answer 2

Приставка icon- класс стал fa fa-:

icon- * -> фа fa- *

Источник: https://github.com/FortAwesome/Font-Awesome/wiki/Upgrading-from-3.2.1-to-4