Jak upewnić się, że każdy glif ma taką samą szerokość?

Zauważyłem, że nawet przy tym samym rozmiarze czcionki nie ma standardowej szerokości. Jak mogę ich użyć przed listą elementów, aby słowa nie były postrzępione?

Zrzut ekranu problemu:

To jest kod:

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

Od 3.1.1 możesz używać tej icon-fixed-widthklasy zamiast edytować CSS.

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

Od wersji 4.0 powinieneś używać 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

Dzięki @kalessin za wskazanie.

Czy na pewno nie zdefiniowałeś innego stylu, który to robi?

Oto jak wygląda Twój kod HTML umieszczony w pliku w witrynie, w której korzystam z Font Awesome:

Zwróć uwagę, jak układają się ikony i tekst. To jest twój oryginalny obraz z dodanymi liniami:

Wygląda na to, że masz gdzieś zdefiniowany styl, który usuwa styl Font Awesome.

Możesz także spróbować dodać oryginalny styl Font Awesome (pochodzący z font-awesome.css), aby sprawdzić, czy to tymczasowo rozwiązuje:

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

Jego prosty i łatwy do skalowania glif lub dowolna ikona za pomocą tego CSS

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

W przypadku wersji Fontawesome powyżej 4.X użyj fa-fwclass w <i>tagu. Nr ref .: - https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons