Tutorial – Tipografía de iconos

En este tutorial me gustaría explicar un poco por encima cómo crear una tipografía con iconos para usar en nuestros proyectos web.

En este caso te enseñaré a añadir nuevos iconos a la tipografía Glyphicons que incluye Bootstrap, también nos vale para FontAwesome o para hacer una propia desde 0 :).

Qué necesitamos

– Un programa de diseño de tipografías, existen muchos (FontLab, Glyphs…), pero BirdFont es gratis, y aunque no es muy intuitivo, nos puede servir.

– Conversor de tipos como FontSquirrel, necesitaremos convertir el archivo resultante .ttf en formatos de fuente web: .eot, .woff y .svg.

– Los iconos que quieras meter en la tipografía en formato SVG: sin agrupar, sin trazados compuestos, todas las formas expandidas y fusionadas.

– Mucha paciencia! No desesperes, BirdFont tiene una interfaz un poco rara y poco intuitiva, así que intentaré simplificar y guiar al máximo los pasos.

Continue reading

La ‘curiosidad’ del viernes

Cómo os prometí la semana pasada, os traigo hoy algo un poco más veraniego.
Y esta vez no es una novedad de Codepen (y eso que he visto unos sliders responsive muy prácticos… venga, ahí os he dejado el link, no me he podido resistir).

Pero, volviendo al tema que nos ocupa este viernes: ¡qué puede ser más veraniego que un “pajarico”!

Los gráficos SVG cada día cobran más fuerza y permiten hacer cosas cada vez más ocurrentes.
La curiosidad de hoy es cómo alinear una imagen SVG utilizando un sistema de coordenadas.
El artículo lleva su estudio, pero me parece algo muy útil para hacer pruebas.

svg-coordenadas

Os lo dejo por si queréis hacer pruebas y ya nos vemos en Agosto.