Recursos para desarrolladores Octubre

Como cada mes tenemos nuestra sección Recursos para desarrolladores Octubre, puedes revisar las ediciones anteriores. Este mes queremos hacer algo distinto, te presentamos un recurso interesante además de un ejemplo de uso, para darle un toque distinto este mes.

Icogram

Icogram es un Recurso/Librería de iconos gratuitos en formato SVG, que puede ser usado en nuestros proyectos para reemplazar los iconos y otras librerías almacenadas en nuestro hosting, con eso reducimos peso de nuestro sitio y peticiones realizadas al servidor. Básicamente añadimos en el “src” de la imagen la dirección del icono deseado y listo. Esta hospedado en Heroku y CloudFlare lo que de seguro reducirá el tiempo de carga de nuestro sitio (Vale aclarar que generalmente las imágenes que enlazamos en nuestro sitio están optimizadas, por lo que la reducción pueda que parezca poca, pero realmente cualquier reducción hace la diferencia en conexiones de baja velocidad).

recursos para desarrolladores octubre

¿Como usarlo?

Se debe incluir como ya mencione en el “src” de la imagen, algo con el siguiente formato:

https://icongr.am/{nombre de la libreria}/{nombre del icono}.svg?[opciones]

Nombre de la librería: Actualmente cuenta con 8 librerías, entre ellas Font Awesome

Iconos: 4431 Iconos

Opciones: Color y Tamaño

Por ejemplo usando https://icongr.am/fontawesome/wordpress.svg?size=32px&color=4d4d4d dentro del src de un imgobtenemos el icono de WordPress tomado de la librería de Font Awesome a un tamaño de 32px.

Con las librerías actuales podemos darnos el banquete gusto de usar el icono de deseemos de acuerdo a cada librería. A comentar quizá para mi parecer que carece de un buscador, son muchos iconos para encontrar el adecuado, la única solución por ahora es buscar en la web de cada librería, no es lo ideal pero soluciona ese tema.

Creación de menú social con Icogram

Vamos a crear un sencillo menú social para comprobar el uso de esta librería.

Definimos la estructura:

Una estructura sencilla con las clases requeridas para luego poder darles estilo

Agregamos las imágenes con los atributos alt

Además decidimos cuales redes sociales listaremos, en este caso Twitter, Facebook, Instagram y Pinterest.

Insertamos las url con los iconos tomados de Icongram

Elegimos la librería que mas se adapte al diseño que estamos realizando y nos fijamos si se encuentra el icono deseado.

Damos algo de estilo

Aprovechamos las clases que definimos para darle un estilo que lo haga ver mejor

Efecto Hover

Añadimos un pequeño efecto hover para que los iconos estén en blanco y negro, al hacer hover tomen su color particular.

Listo tendríamos un sencillo menú social que podríamos integrar a nuestro diseño, realmente simple, práctico y liviano.

Puedes descargar el archivo final para ver tener el funcionamiento, desde nuestra sección de recursos que te invitamos a visitar.

Menú social

Menú Social Simple con Icongram – Archivo Fuente

Suscribete Ahora

Suscríbete a nuestro boletín para recibir noticias, actualizaciones, promociones, Obsequios y nuevos temas por correo electrónico. No hacemos spam.

No vamos a compartir su información personal.