Foros del Web » Creando para Internet » CSS »

Bootstrap + Fontawesome - Extraño comportamiento de iconos

Estas en el tema de Bootstrap + Fontawesome - Extraño comportamiento de iconos en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/06/2013, 09:34
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 14 años, 2 meses
Puntos: 10
Exclamación Bootstrap + Fontawesome - Extraño comportamiento de iconos

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!
  #2 (permalink)  
Antiguo 25/06/2013, 14:23
Avatar de Karmac  
Fecha de Ingreso: agosto-2011
Ubicación: Bilbao
Mensajes: 196
Antigüedad: 10 años, 5 meses
Puntos: 34
Respuesta: Bootstrap + Fontawesome - Extraño comportamiento de iconos

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

Te quedaría así:



Espero que te funcione así. Saludos.

Etiquetas: bootstrap, comportamiento, extraño, iconos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:24.