"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Glyphicons en Bootstrap3

¿Qué son los Glyphicons?

Los Glyphicons son una fuente de iconos, y por fuente nos referimos a las fuentes tipográficas, como podrían ser Arial, Tahoma o Times New Roman.

La diferencia es que una fuente vienen contenidos los caracteres alfabéticos, y en una fuente de iconos lo que vienen, como su propio nombre indica, son iconos. Las ventajas que tiene las fuentes de iconos es que al tratarlos como si fueran tipografía, a través de los estilos CSS podemos cambiarles el color y el tamaño a nuestro antojo sin tener que duplicar los mismos iconos 100 veces con distintos tamaños y colores (un puntazo porque nuestra página pesará mucho menos, tendremos la seguridad de visualizarlos bien y además con menos llamadas y tiempo de carga mejoramos el SEO).

Pues contestando a la pregunta, Glyphicons es la fuente de iconos que viene integrada en BootStrap3. De hecho si bajásemos la última versión y la descomprimiéramos veríamos una carpeta llamada fonts y dentro esto…

 

glyphicons2

 

¿Donde puedo verlos?

Bootstrap en su versión 3 nos ofrece aproximadamente 200 iconos que podremos ver en http://getbootstrap.com/components/#glyphicons como se aprecia en la siguiente imagen…

 

glyphicons

 

¿Como los puedo usar?

Si has descomprimido Bootstrap de forma correcta en la raiz tendras las carpetas css, js y fonts con que en tu pagina llames al .css ya es suficiente este importa la fuente de los glyphicons y lo deja listo para usar, podriamos quitarlos si procesaramos BootStrap desde sus fichero LESS o SASS, en este caso vamos a usar la version ya compilada que trae todo.

Una vez tenemos el .css ya en nuestra web, lo unico que tenemos es que asignar las clases que se ven en la imagen superior una etiqueta span o a una etiqueta i, por ejemplo si quiero poner el icono de la banderita que en la imagen de arriba es el ultimo de la penultima fila visible, escribiria:

Cualquiera de las dos lineas daria como resultado esto:

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)