Bootstrap + Fontawesome - Extraño comportamiento de iconos

[NaRanJiTo78]

Hola!

Diseñando una web con bootstrap, he decidido poner 3 áreas con iconos, y en vez de usar los de bootstrap (glyphicons) he puesto algunos de Fontawesome.

Pero lo extraño, es que se ven diferentes en Safari y Chrome (con márgenes extraños) y bien en Firefox e IE.

He probado por si hubiera algún problema de compatibilidad css con fontawesome y decidí a probar con los iconos de glyphicons...con el mismo resultado.

Por más que intento pensar y solucionar el problema (firebug, o añadiendo clases a los parrafos o iconos), no consigo encontrar la solución a porqué esto ocurre...

Alguien me podría ayudar?

La web en cuestión es http://www.firenetworks.eu

Gracias por adelantado, un saludo!

[Karmac]

He estado probando y he llegado a una conclusión. Mira la siguiente captura:



Como puedes ver el icono solamente ocupa esa parte en Chrome, es decir, la parte de abajo de icono sobresaldría debido a que el contenido es más alto que el contenedor. He probado a cambiar el alto y alto de línea del icono, pero deja de verse bien. En su lugar, lo que tienes que hacer es definir un alto para el <p> que contiene el icono, a mí con 120px me va de lujo. Es decir:

Código HTML:

<div class="span4">
                <h2>Desarrollo</h2>
                 <p style="
    height: 120px;
"><i class="icon-magic icon-4x"></i></p>
                 <p>Creamos tu proyecto desde el inicio, con diseño adaptable para que la web se visualice en cualquier tipo de dispositivo.</p>
                </div>
 

Te quedaría así:



Espero que te funcione así. Saludos.