ฉันจะแน่ใจได้อย่างไรว่าทุกสัญลักษณ์มีความกว้างเท่ากัน

ฉันสังเกตว่าแม้จะมีขนาดตัวอักษรเท่ากัน แต่ก็มีความกว้างไม่เท่ากัน ฉันจะใช้สิ่งเหล่านี้หน้ารายการเพื่อให้คำไม่ดูขรุขระได้อย่างไร

ภาพหน้าจอของปัญหา:

นี่คือรหัส:

<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 คุณสามารถใช้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 / จัดแต่งทรงผม / ไอคอนความกว้างคงที่

ขอบคุณ @kalessin ที่ชี้ให้เห็น

คุณแน่ใจหรือไม่ว่าคุณไม่ได้กำหนดรูปแบบอื่นที่ทำเช่นนี้

นี่คือลักษณะที่ HTML ของคุณวางไว้ในไฟล์บนไซต์ที่ฉันใช้ Font Awesome:

สังเกตว่าไอคอนและข้อความเรียงกันอย่างไร นี่คือภาพต้นฉบับของคุณที่มีการเพิ่มบรรทัด:

ดูเหมือนว่าคุณมีสไตล์ที่กำหนดไว้บางแห่งซึ่งกำลังลบสไตล์ Font Awesome

คุณสามารถลองเพิ่มรูปแบบ Font 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;
}

มันง่ายและสะดวกในการปรับขนาดสัญลักษณ์หรือไอคอนใด ๆ โดยใช้ css นี้

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

สำหรับ Fontawesome เวอร์ชันที่สูงกว่า4.Xให้ใช้fa-fwคลาสใน<i>แท็ก อ้างอิง: - https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons