(Tiempo estimado: 2 - 3 minutos)

Pues sí. Bien dice el título de este artículo. Una imagen vale más que mil palabras, y un icono también.

Cada vez es más frecuente el uso de iconos en nuestros sitios web. Un icono que ayuda al usuario a identificar un producto o un servicio.

Vamos a ver diferentes formas de generar iconos para nuestro sitio web.

A través de CSS y tipos de fuente

Hace tiempo se utilizaban imágenes para generar este tipo de iconos que acompañan siempre a un producto o un servicio.

Ahora tenemos la posibilidad de utilizar hojas de estilo y tipos de fuente para incluirlos.

Ya no tenemos que emplear tiempo en crear una imagen, adaptarla y subirla a nuestro servidor.

Simplemente incluimos la fuente y, a través de diferentes clases, tenemos los iconos en nuestro sitio web.

Así de fácil.

Herramientas online para generar iconos mediante CSS y tipos de fuente

En la red disponemos de varias herramientas que nos permiten integrar iconos en nuestra web.

A continuación te presento algunas de ellas:

  • Font Awesome: Quizás sea la más, o una de las más utilizadas. Con un solo tipo de fuente disponemos de 519 iconos. Estos iconos están dividios en varias categorías que hacen que su búsqueda sea más sencilla. No requiere javascript y es muy fácil de utilizar.
  • Entypo: 411 iconos.
  • Iconia.
  • Typicons: 336 iconos.

Y hay muchas más. Solo es cuestión de buscar en Google.

Como ves, tenemos muchas opciones fáciles de implementar, integrar y utilizar.

Pero qué ocurre cuando, además de querer ese icono en este formato, lo queremos también tener como imagen.

Pues para eso tenemos Iconion.


Herramienta de escritorio: Iconion

Tal y como nos cuentan en su web:

Las fuentes de íconos son un excitante método que le da a los diseñadores de sitios web la escalabilidad, flexibilidad, y rendimiento para manipular los íconos. Pero, ¿qué pasa si Usted necesita usar esos íconos en escritorio o una aplicación de móviles? ¿O crear un sitio web favicon o un ícono multi-color?

La única respuesta son íconos de imagenes pasadas de moda en formato png o ico. Iconion convierte sus íconos favoritos en íconos de imagenes modernas y coloridas

Esta herramienta de escritorio (compatible con MAC y Windows) nos permite crear una imagen de un icono a partir de algunas de las herramientas anteriores y convertirlas en formato png, bmp, jpeg o archivos ico.

Es fácil de utilizar y permite personalizarlas de forma casi casi ilimitada.

Y como más vale una imagen que mil palabras, aquí te dejo una captura:

iconion herramienta escritorio


Una buena herramienta y un gran recurso.


Si quieres más información y descargarla: iconion.com

Sobre el autor, Sergio Iglesias

Sergio Iglesias

Sergio Iglesias es formador, desarrollador y front-end del CMS Joomla!. A través de su blog y sus cursos puedes aprender a desarrollar tu propio portal web autogestionable.

 

¿Te ha gustado el artículo? ¡Suscríbete YA!

¿Necesitas un sitio web que funcione?

¿No quieres depender de nadie para gestionar tu página web?

Recibe contenido exclusivo y GRATIS mi curso sobre desarrollo de plantillas Joomla!


Me apunto ya!

Comentarios

#2 sergiois 27-04-2015 09:09
Hola Alejandro!!

Un placer tenerte por aquí!!

Pues tienes toda la razón. De forma nativa tenemos esta librería de iconos disponible. Os pongo un enlace de cómo implementarlo en nuestro proyecto Joomla: https://magazine.joomla.org/es/ediciones-anteriores/marzo-2015/item/2569-como-implementar-los-iconos-vectoriales-de-icomoon-en-una-plantilla-de-joomla

Gracias por comentar. A ver si nos vemos!!
Citar
#1 Alejandro Domínguez 27-04-2015 09:03
Hola Sergio!

Yo añadiría también Icomoon, que son las que traen nuestro querido Joomla 3 de serie :)
Citar

Escribir un comentario

Puedes publicar el comentario que quieras, pero si lo considero SPAM será eliminado automáticamente.

 

SergioIglesias.NET te informa que los datos de carácter personal que nos proporciones rellenando este formulario serán tratados por Sergio Iglesias Sánchez como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es, únicamente, para gestionar los comentarios de este blog. La legitimación se realiza a través del consentimiento del interesado. Te informamos que los datos que nos facilitas estarán ubicados en los servidores de SiteGround (proveedor de hosting). Ver política de privacidad de Siteground. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@sergioiglesias.net así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad.

¿Quieres tener un sitio web que funcione?

Contacta conmigo