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

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

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

Это код:

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

Ответ 1

Начиная с 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 за указание.

Ответ 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); }

Ответ 4

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