Her glifin aynı genişliğe sahip olduğundan nasıl emin olabilirim?

Aynı yazı tipi boyutunda bile standart bir genişlik olmadığını fark ettim. Sözcüklerin pürüzlü görünmemesi için bunları bir öğe listesinin önünde nasıl kullanabilirim?

Sorunun ekran görüntüsü:

Kod bu:

<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'den beri icon-fixed-width, CSS'yi düzenlemek yerine sınıfı kullanabilirsiniz .

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

4.0'dan beri şunları kullanmalısınız 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 / sabit genişlikli simgeler

@Kalessin'e işaret ettiğiniz için teşekkürler.

Bunu yapan başka bir stilin tanımlanmadığından emin misin?

HTML'niz Font Awesome'i kullandığım bir sitedeki bir dosyaya şu şekilde yerleştirilir:

Simgelerin ve metnin nasıl sıralandığına dikkat edin. Bu, satırlar eklenmiş orijinal görüntünüzdür:

Görünüşe göre bir yerde tanımlanmış ve Font Awesome stilini kaldıran bir stiliniz var.

Ayrıca font-awesome.css, geçici olarak çözüp çözmediğini görmek için orijinal Font Awesome stilini (nereden geliyor ) eklemeyi deneyebilirsiniz :

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

Bu css kullanarak glif veya herhangi bir simgeyi ölçeklendirmek basit ve kolaydır

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

Yukarıdaki Fontawesome sürümü için 4.X , kullanım fa-fwsınıf <i>etiketi. Referans: - https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons