Comment m'assurer que chaque glyphe a la même largeur ?

Question

J'ai remarqué que même avec la même taille de police, il n'y a pas de largeur standard. Comment puis-je les utiliser devant une liste d'articles pour que les mots n'apparaissent pas en dents de scie ?

Capture d'écran du problème :

Voici le code :

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

Answer 1

Depuis la version 3.1.1, vous pouviez utiliser l'option icon-fixed-width au lieu de devoir modifier le CSS.

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

Depuis la version 4.0, vous devez utiliser 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

Merci @kalessin de l'avoir signalé.

Answer 2

Êtes-vous sûr que vous n'avez pas un autre style défini qui fait cela ?

Voici à quoi ressemble votre HTML placé dans un fichier sur un site où j'utilise Font Awesome :

Remarquez comment les icônes et le texte s'alignent. Voici votre image originale avec les lignes ajoutées :

Il semble que vous ayez défini un style quelque part qui supprime le style Font Awesome.

Vous pouvez aussi essayer d'ajouter le style original de Font Awesome (provenant de font-awesome.css ) pour voir si cela résout temporairement le problème :

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

Answer 3

Pour la version Fontawesome ci-dessus 4.X utiliser fa-fw dans la classe <i> étiquette. Ref:- https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

Answer 4

C'est simple et facile de mettre à l'échelle un glyphe ou une icône en utilisant ce css.

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