Come posso assicurarmi che ogni glifo abbia la stessa larghezza?

Ho notato che anche alla stessa dimensione del carattere, non c'è una larghezza standard. Come posso usarli davanti a un elenco di elementi in modo che le parole non appaiano frastagliate?

Screenshot del problema:

Questo è il codice:

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

Dalla 3.1.1, potresti usare la icon-fixed-widthclasse invece di dover modificare il CSS.

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

A partire dalla 4.0, dovresti usare 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 / icone a larghezza fissa

Grazie @kalessin per avermelo fatto notare.

Sei sicuro di non aver definito un altro stile per farlo?

Ecco come appare il tuo HTML inserito in un file su un sito che ho usando Font Awesome:

Notare come le icone e il testo si allineano. Questa è la tua immagine originale con le linee aggiunte:

Sembra che tu abbia uno stile definito da qualche parte che rimuove lo stile Font Awesome.

Puoi anche provare ad aggiungere lo stile Font Awesome originale (proveniente da font-awesome.css) per vedere se questo lo risolve temporaneamente:

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

È semplice e facile da ridimensionare glifo o qualsiasi icona utilizzando questo css

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

Per la versione di Fontawesome sopra 4.X , usa fa-fwclass nel <i>tag. Rif: - https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons