Font Awesome vs Glyphicons en Twitter Bootstrap

81

Soy un principiante en desarrollo web y recientemente comencé a trabajar con Twitter Bootstrap, sé que usa Glyphicons que ya sé usar. Pero también encontré Font Awesome que dice que está construido para Bootstrap.

¿Cuáles son las diferencias entre los dos? Quiero decir, ¿uno es una alternativa para el otro? ¿O debería usarlos en diferentes lugares?

twitter-bootstrap font-awesome glyphicons usuario2471133
fuente

Respuestas:

66

En Bootstrap 2.xx, los Glyphyicons eran en formato de imagen, por lo que no puede aumentar el tamaño, cambiar el color, el color de fondo, etc. fácilmente. Sin embargo, font-awesome te brinda íconos vectoriales escalables que se pueden personalizar instantáneamente: tamaño, color, sombra y cualquier cosa que se pueda hacer con el poder de CSS.

Font-awesome es realmente una alternativa para Glyphyicons que se actualiza de vez en cuando con nuevos íconos. Fat y Mdo planean integrar Font-awesome en la versión 3 de bootstrap como reemplazo de Glyphyicons.

Mi sugerencia es que uses bootstrap con font-awesome. Primero incluya bootstrap css y luego Font-awesome css, para que los Glyphyicons sean reemplazados por font-awesome.

ACTUALIZAR

En la versión de bootstrap 3.xx, los glifos se convierten en formato de fuente, que se representará bien incluso con un tamaño de fuente de 12px. Si está utilizando la última versión de fontawesome, es decir, 4.01, puede utilizar ambos glifos con fontawesome.

Ravimallya
fuente
19
+1, pero la integración con Font Awesome no se implementó en Bootstrap 3. FA no está afiliado oficialmente con Twitter, salvo que sea compatible con Bootstrap 2 desde el primer momento. Aquí hay una comparación de diferentes paquetes de iconos de fuentes que admiten bootstrap.
jrhorn424
2
Actualización: Bootstrap 4 ya no envía Glyphicons.
MushyPeas
FontAwesome afirma que es 100% gratuito, incluso para uso comercial. Los glifos tienen algunas limitaciones: "Los medianos de los glifos normalmente no están disponibles de forma gratuita". No sé acerca de las "fuentes de material de Google", pero para algunos productos (módulo de gráficos js) no puede alojarlo usted mismo y solo puede vincularlo desde su CDN.
Andrei
¿Cuál es la ventaja de usar iconos vectoriales que vienen con una fuente impresionante? ¿Qué tipo de imágenes se usan para glifos?
Monojit Sarkar
@Ravimallya dijiste que el tamaño y el color del icono de glifo no se pueden cambiar. No sé en qué contexto dijiste esto. Encontré que el tamaño y el color se pueden cambiar. aquí hay un ejemplo -----> cambiar el color del icono de glifo -> algunas muestras <span class = "glyphicon glyphicon-user" style = "color: blue"> </span> el tamaño también se puede aumentar. aquí está escribir stackoverflow.com/a/24960243/6188148
Monojit Sarkar
28

Font Awesome: - Más de 150 íconos más - Pixel perfecto en la fuente de arranque predeterminada (14px) - Los íconos no tienen el mismo tamaño y requieren CSS personalizado para alinearlos - Tiene lista con viñetas, rotación (se puede agregar con css3), íconos apilados y animación giratoria (se puede agregar manualmente) Glyphyicons: - Menos iconos - Pixel Perfect con un tamaño de fuente más grande (16px) - Iconos del mismo tamaño

ver: http://tagliala.github.io/vectoriconsroundup/

Una comparación lado a lado entre las fuentes de iconos populares hechas para Bootstrap.

Neo
fuente
12

Font awesome es una colección de iconos vectoriales que se obtienen usando una fuente específica y algo de CSS para hacer la "magia", Glyphicons usa la técnica sprite-css.
Puede usar ambos, simplemente agregue el archivo css después del de Bootstrap.

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>

Si no desea tener glifos, sino solo uno de fuente impresionante, debe ir aquí y personalizar su descarga de Bootstrap para obtenerlo sin glifos.

tommaso capelli
fuente
13
¡Los glifos que vienen con bootstrap ahora también usan el método de fuente! getbootstrap.com/components/#glyphicons
Neo
Cómo ? ¿Su enlace proporciona información para usar glifos de forma vectorial?
trante
4
Los nuevos glifos para Twitter Bootstrap ya están en formato vectorial.
tommaso capelli