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

98

J'ai remarqué que même à la même taille de police, il n'y a pas de largeur standard. Comment puis-je les utiliser devant une liste d'éléments pour que les mots ne semblent pas irréguliers?

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>
font-awesome Jim Hohl - Directeur technique de Vidaao
la source

Réponses:

7

Êtes-vous sûr de ne pas avoir défini un autre style qui fait cela?

Voici à quoi ressemble votre HTML placé dans un fichier sur un site que j'ai en utilisant Font Awesome:

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

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

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

li [class^="icon-"], .nav li [class^="icon-"], 
li [class*=" icon-"], .nav li [class*=" icon-"] {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}
Adrianbanks
la source
Je vous remercie. Ce n'était pas dans mon font-awesome.css, ni dans le fichier que j'ai téléchargé ( fortawesome.github.io/Font-Awesome/assets/font-awesome.zip ) ou même dans la version CDN qu'ils référencent ( bootstrapcdn.com/ index.html? v = 05162013150137 # tab_fontawesome ). Mais ça a marché. Merci.
Jim Hohl - CTO Vidaao
2

Son glyphe simple et facile à mettre à l'échelle ou toute icône en utilisant ce css

> .fa { transform: scale(1.5,1); }
Hasnain Mehmood
la source