Como posso ter certeza de que todos os glifos têm a mesma largura?

98

Percebi que mesmo com o mesmo tamanho de fonte, não existe uma largura padrão. Como posso usar isso na frente de uma lista de itens para que as palavras não apareçam irregulares?

Captura de tela do problema:

Este é o código: 

<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 - CTO Vidaao
fonte

Respostas:

7

Tem certeza de que não definiu outro estilo que faça isso?

Esta é a aparência do seu HTML colocado em um arquivo em um site que estou usando o Font Awesome:

Observe como os ícones e o texto se alinham. Esta é sua imagem original com linhas adicionadas:

Parece que você tem um estilo definido em algum lugar que está removendo o estilo Font Awesome.

Você também pode tentar adicionar o estilo Font Awesome original (vindo de font-awesome.css) para ver se isso resolve o problema temporariamente:

li [class^="icon-"], .nav li [class^="icon-"], 
li [class*=" icon-"], .nav li [class*=" icon-"] {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}
Adrianbanks
fonte
Obrigado. Isso não estava em meu font-awesome.css, nem no arquivo que baixei ( fortawesome.github.io/Font-Awesome/assets/font-awesome.zip ) ou mesmo na versão CDN que eles fazem referência ( bootstrapcdn.com/ index.html? v = 05162013150137 # tab_fontawesome ). Mas funcionou. Obrigado.
Jim Hohl - CTO Vidaao
2

É simples e fácil de escalar o glifo ou qualquer ícone usando este css

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