Làm cách nào để đảm bảo mọi glyph đều có cùng chiều rộng?

Tôi nhận thấy rằng ngay cả ở cùng một kích thước phông chữ, không có chiều rộng tiêu chuẩn. Làm cách nào để tôi có thể sử dụng những thứ này trước danh sách các mục để các từ không bị răng cưa?

Ảnh chụp màn hình của sự cố:

Đây là mã:

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

Kể từ 3.1.1, bạn có thể sử dụng icon-fixed-widthlớp thay vì phải chỉnh sửa CSS.

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

Kể từ 4.0, bạn nên sử dụng fa-fw:
4.x https://fontawesome.com/v4.7.0/examples/#fixed-width
5.x https://fontawesome.com/how-to-use/on-the-web / styles / fixed-width-icon

Cảm ơn @kalessin đã chỉ ra.

Bạn có chắc rằng bạn chưa xác định một kiểu khác đang thực hiện việc này không?

Đây là cách HTML của bạn trông như được đặt vào một tệp trên trang web mà tôi có bằng cách sử dụng Font Awesome:

Chú ý cách các biểu tượng và dòng chữ sắp xếp. Đây là hình ảnh ban đầu của bạn với các dòng được thêm vào:

Có vẻ như bạn có một kiểu được xác định ở đâu đó đang xóa kiểu Font Awesome.

Bạn cũng có thể thử thêm kiểu Font Awesome gốc (đến từ font-awesome.css) để xem liệu điều đó có giải quyết được tạm thời hay không:

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

Đơn giản và dễ dàng mở rộng glyph hoặc bất kỳ biểu tượng nào bằng cách sử dụng css này

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

Đối với phiên bản Fontawesome trên 4.X , hãy sử dụng fa-fwlớp trong <i>thẻ. Tham khảo: - https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons