Как я могу убедиться, что каждый глиф имеет одинаковую ширину?

Я заметил, что даже при том же размере шрифта стандартная ширина отсутствует. Как я могу использовать их перед списком элементов, чтобы слова не казались зубчатыми?

Снимок экрана:

Это код: 

<ul id="myTab">
    <li class="active"><a href="#home"><i class="icon-tasks"></i> Proposal</a></li>
    <li><a href="#video"><i class="icon-film"></i> Videos</a></li>
    <li><a href="#asset"><i class="icon-paper-clip"></i> Assets</a></li>
    <li><a href="#payment"><i class="icon-credit-card"></i> Payment</a></li>
    <li><a href="#history"><i class="icon-calendar empty"></i> History</a></li>
</ul>

ОТВЕТЫ

Ответ 2

Вы уверены, что у вас нет другого определенного стиля, который делает это?

Вот как выглядит ваш HTML файл в файле на сайте, который я использую для Font Awesome:

Обратите внимание, как отображаются значки и текст. Это ваше исходное изображение с добавленными строками:

Похоже, у вас есть стиль, определенный где-то, что удаляет стильный стиль Font Awesome.

Вы также можете попробовать добавить в оригинальный стиль шрифта Awesome (начиная с font-awesome.css), чтобы узнать, разрешает ли это его временно:

li [class^="icon-"], .nav li [class^="icon-"], 
li [class*=" icon-"], .nav li [class*=" icon-"] {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}

Ответ 3

Простой и удобный для масштабирования глиф или любой значок с помощью этого css

> .fa { transform: scale(1.5,1); }