Existen multitud de bibliotecas que nos facilitan la inserción de iconos en un páginas web.
Para insertar un icono en una página web, asignar una clase de iconos a cualquier elemento HTML ‘inline’.
Los elementos <i> y <span> son ampliamente usados para insertar iconos.
Tabla de contenidos
Las bibliotecas de iconos
La biblioteca de iconos Font Awesome
[actualizado-octubre/2020] Uno de los repositorios más conocidos para insertar iconos en formato vectorial. Font Awesome ofrece una solución de íconos flexible para que pueden modificarse fácilmente usando CSS, y están diseñados para funcionar a la perfección en una variedad de frameworks.
La opción preferente de uso de su catálogo es de forma online, mediante un código HTML llamado KIT CODE, de llamada a script que permite agregar fácilmente iconos con la etiqueta <i>, previo registro en fontawesome.com y obtención de este código, que es personalizado para cada cuenta de usuario.
Otra alternativa, que anteriormente era usual, es enlazar a un CDN mediante una etiqueta <link>. Desconozco si esta opción ahora simplemente está en desuso o va a ser finalmente retirada por Font Awesome.
Por último, podemos descargar localmente la biblioteca Font Awesome.
Font Awesome tiene un plan gratuito y un plan de pago que incluye Font Awesome 6, además de los ya incluidos en el plan Free.
La biblioteca de iconos de Google
Para usar la biblioteca de iconos de Google, agregamos dentro de la sección <head> de nuestra página HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
No se requiere descarga alguna. Agregar la clase ‘material-icons’ a un elemento inline e insertar el nombre del icono:
<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>
The Noun Project
Una de las más grandes colecciones de iconos, con una búsqueda fácil. Opciones gratuita y de pago, ambas tienen acceso a todos los iconos. Sin embargo, como miembro gratuito, debe insertarse una atribución al diseñador de un icono cada vez que se use este.
Enlaces de interés
Tutorial w3schools | w3schools, guía de referencia de iconos, con buscador por palabra clave | Artículo de ElegantThemes para insertar iconos en sus temas | Página con un listado con las mejores bibliotecas de iconos disponibles |
Deja una respuesta