web-dev-qa-db-fra.com

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

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 afin que les mots ne paraissent pas irréguliers?

Capture d'écran du problème: 

C'est 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
85
Jim Hohl - CTO Vidaao

Depuis la version 3.1.1, vous pouvez utiliser la classe icon-fixed-width au lieu d’avoir à éditer le CSS.

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

Depuis la version 4.0, vous devriez 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 pour le signaler.

181
leesei

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

Voici comment votre HTML apparaît placé dans un fichier d'un site que j'ai créé avec Font Awesome:

Remarquez l'alignement des icônes et du texte. 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 Police Awesome (provenant de font-awesome.css) pour voir si cela 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;
}
5
adrianbanks

Son glyphe simple et facile à mettre à l'échelle ou n'importe quelle icône utilisant ce css 

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

Pour la version de Fontawesome ci-dessus 4.X, utilisez la classe fa-fw dans la balise <i> . Réf: - https://fontawesome.com/how-to-use/on-the-web/styling/ icônes à largeur fixe

0
Anant Singh