Як переконатися, що кожен гліф має однакову ширину?

Я помітив, що навіть при однаковому розмірі шрифту не існує стандартної ширини. Як я можу використовувати їх перед списком елементів, щоб слова не здавались зазубреними?

Знімок екрана випуску:

Це код:

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

З 3.1.1 ви можете використовувати icon-fixed-widthклас замість того, щоб редагувати 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 / styling / fixed-width-icons

Дякую @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-fwклас у <i>тегу. Посилання: - https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons