FontAwesome Icons нарушает пиксель во время преобразования

Question

Я использую FontAwesome Icons в своем приложении в списке древовидной структуры. fa-care-down и fa-caret-right нарушают мой пиксель, как на праве, чтобы он переместил контент на 5 пикселей во время изменения fa-caret-right на fa-care-down.

Вот мой HTML-код:

<i class="fa fa-caret-down"></i> 

CSS:

.fa { 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    /*font-size: inherit;*/ 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    transform: translate(0, 0); 
} 
.fa-caret-right:before { 
    content: "\f0da"; 
} 
.fa-caret-down:before { 
    content: "\f0d7"; 
} 

Answer 1

Шрифт Высокий есть исправление для этого.

фиксированной ширины Иконки

Используйте фа-FW, чтобы установить значки на фиксированной ширины. Отлично подходит для использования, когда различные значки ширины скинули выравнивание. Особенно полезно в таких вещах, как навигационные списки & группы списков.

Here вы можете найти информацию о различных характеристиках шрифта Awesome.

ul { 
 
    list-style:none; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<ul> 
 
    <li> 
 
     <span class="fa fa-caret-down fa-fw"></span> 
 
     Fruit 
 
     <ul> 
 
      <li>Apple</li> 
 
      <li>Orange</li> 
 
      <li>Apple</li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <span class="fa fa-caret-right fa-fw"></span> 
 
     Animals 
 
     <ul> 
 
      <li>Monkey</li> 
 
      <li>Dog</li> 
 
      <li>Cat</li> 
 
     </ul> 
 
    </li> 
 
</ul>

Answer 2

Вы должны помнить, что шрифт-Потрясающие иконки не более чем простые символы - буквы, если вам нравится. Буква «W», например, шире буквы «I» - одинаково .fa-caret-down шире, чем .fa-caret-right.

Чтобы преодолеть эту проблему, одно решение этой проблемы является определение конкретного width на вашем i элемент, чтобы остановить различные иконки из влияющий это значение сами:

i.fa { 
    text-align: center; /* If you want the icons to appear central. */ 
    width: 20px;   /* Adjust accordingly. */ 
}