Bagaimana cara memastikan setiap mesin terbang memiliki lebar yang sama?

Saya perhatikan bahwa bahkan pada ukuran font yang sama, tidak ada lebar standar. Bagaimana saya bisa menggunakan ini di depan daftar item sehingga kata-kata tidak tampak bergerigi?

Tangkapan layar masalah:

Ini kodenya:

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

Sejak 3.1.1, Anda dapat menggunakan icon-fixed-widthkelas daripada harus mengedit CSS.

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

Sejak 4.0, Anda harus menggunakan 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

Terima kasih @kalessin untuk menunjukkan.

Apakah Anda yakin bahwa Anda belum menentukan gaya lain yang melakukan ini?

Beginilah tampilan HTML Anda ke dalam file di situs yang saya gunakan Font Awesome:

Perhatikan bagaimana ikon dan teks berbaris. Ini adalah gambar asli Anda dengan menambahkan garis:

Sepertinya Anda memiliki gaya yang ditentukan di suatu tempat yang menghapus gaya Font Awesome.

Anda juga dapat mencoba menambahkan dalam gaya Font Awesome (berasal dari font-awesome.css) untuk melihat apakah itu menyelesaikannya untuk sementara:

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

Sederhana dan mudah untuk menskalakan mesin terbang atau ikon apa pun menggunakan css ini

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

Untuk versi Fontawesome di atas 4.X , gunakan fa-fwclass dalam <i>tag. Ref: - https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons