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

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

Скриншот проблемы:

Это код:

<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>

Начиная icon-fixed-widthс версии 3.1.1, вы могли использовать этот класс вместо редактирования CSS.

http://fortawesome.github.io/Font-Awesome/3.2.1/examples/#navigation

Начиная с 4.0, вы должны использовать fa-fw:
4.x https://fontawesome.com/v4.7.0/examples/#fixed-width
5.x https://fontawesome.com/how-to-use/on-the-web / стили / значки фиксированной ширины

Спасибо @kalessin за указание.

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

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

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

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

Вы также можете попробовать добавить оригинальный стиль Font 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;
}

Его простой и легко масштабируемый глиф или любой значок с помощью этого CSS

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

Для версии Fontawesome выше 4.X используйте fa-fwclass в <i>теге. Ссылка: - https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons