¿Cómo me aseguro de que todos los glifos tengan el mismo ancho?


98

Me di cuenta de que incluso con el mismo tamaño de fuente, no hay un ancho estándar. ¿Cómo puedo usarlos frente a una lista de elementos para que las palabras no aparezcan irregulares?

Captura de pantalla del problema:

Este es el 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>

Respuestas:



7

¿Estás seguro de que no tienes otro estilo definido que esté haciendo esto?

Así es como se ve su HTML colocado en un archivo en un sitio que tengo usando Font Awesome:

Observe cómo se alinean los íconos y el texto. Esta es tu imagen original con líneas agregadas:

Parece que tiene un estilo definido en algún lugar que está eliminando el estilo Font Awesome.

También puede intentar agregar el estilo Font Awesome original (proveniente de font-awesome.css) para ver si eso lo resuelve temporalmente:

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

Gracias. Esto no estaba en mi font-awesome.css, ni en el archivo que descargué ( fortawesome.github.io/Font-Awesome/assets/font-awesome.zip ) o incluso en la versión CDN a la que hacen referencia ( bootstrapcdn.com/ index.html? v = 05162013150137 # tab_fontawesome ). Pero funcionó. Gracias.
Jim Hohl - CTO Vidaao

2

Es simple y fácil de escalar glifo o cualquier ícono usando este CSS

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.