Miles de iconos para tu página web

Miles de iconos para tu página web
Escrito 3 years ago

Los iconos siempre han sido una parte fundamental en cualquier aplicación. Algunos de ellos son tan comunes que cualquier usuario puede reconocer su significado con tan solo verlo.

Antes, añadir cualquier icono en una página web era una tarea, como mínimo, tediosa. Tenías que crear una imagen con el icono, guardarla en tu directorio web y añadirlo como si fuera una imagen más. Si tu sitio web tenía muchos iconos, provocabas una gran cantidad de descargas de imágenes cada vez que alguien accedía a tu página web. Además de otros problemas como que no podían ser redimensionados, sin perder calidad o que no se adaptaban a cualquier color de fondo.

En la actualidad esto ya ha cambiado y ahora existen multitud de proyectos con lo que podrás añadir una gran cantidad de iconos de manera rápida y eficaz. Además se pueden redimensionar y cambiar su color.

Font awesome

Es una librería css que te permite utilizar más de 600 iconos de una manera gratuita y sencilla. Compatible con todo los navegadores modernos ie10+.

Puedes descargarte el archivo css e incluirlo directamente en tu proyecto, o utilizar el código js que te proporcionan para cargar el archivo css de manera externa a través de un cdn.

  • Enlace para instalar Font awesome en nuestra web.

    Nota:

    Si quieres instalar Font awesome a través de un cdn debes darle tu dirección e-mail. Ellos te enviarán un e-mail con el código js necesario.

  • Enlace con una guía para añadir los iconos a vuestro proyecto web.

  • Enlace con un buscador de iconos.

twemoji-awesome

Similar a Font awesome pero enfocado en los emojis de Twitter. Tiene más de 100 iconos y estos se descargan a través de un cdn, por lo que no tiene que añadir las imágenes de los emojis en tu proyecto. Su instalación y uso también es bastante sencillo. Solo tiene que acceder a su github, descargarte el archivo twemoji-awesome.css e incluirlo en tu proyecto.

Para añadir los iconos a tu proyecto:

  1. Accede a esta base de datos de iconos y escoge el icono que quieres añadir

  2. Copia el nombre que aparece al lado del icono.

  3. Escribe el siguiente código html <span class="twa-[nombre-icono]"></span>, sustituyendo [nombre-icono] por el nombre del icono que quieres. En el nombre debes reemplazar el carácter _ por el carácter -.

Aquí podéis ver un ejemplo de esta librería.

Foundation Icon Fonts 3

Otra librería css con 283 iconos para tu web. Gratuitos y redimensionables. Solo te tienes que descargar los archivos de su página web e incluirlo en tu proyecto web. Para añadir el icono tienes que escribir este código html <i class="fi-[icon]"></i>. Sustituyendo [icon] por el nombre del icono que quieras.

Iconfinder

Si alguno de los proyectos anteriores no te convence o no tienen el icono que buscas. Siempre puedes acceder a esta base de datos con casi un millón de iconos y descargarte el que más te gusta. Puedes obtener cualquier icono en varios formatos y dimensiones. Aunque mucho de ellos son de pago, también hay miles de ellos gratuito.

Esto son solo algunos ejemplos que yo conozco y que más utilizo. Pero seguro que existen más. Si conocéis algunos, no dudéis en escribirlo en un comentario.

Comentarios