Anteriormente, aprendimos cómo insertar fuentes personalizadas en nuestros sitios web utilizando Google Fonts. En este artículo, vamos a aprender cómo insertar iconos vectoriales de Google Fonts Icons en nuestras páginas.
1. ¿Qué son los iconos de Google Fonts?
Los iconos de Google, disponibles en la biblioteca de Google Fonts Icons, son conjuntos de iconos vectoriales diseñados para ser claros, legibles y consistentes en cualquier tamaño. Utilizan gráficos vectoriales escalables (SVG), lo que significa que se ven nítidos en cualquier resolución y tamaño de pantalla. Estos iconos se pueden personalizar con CSS y mediante las herramientas disponibles en el configurador de iconos: grosor de su trazo, relleno, tamaño, etc.
Si quieres utilizar tus propias imágenes SVG y estás buscando cómo insertarlas, te recomiendo ver el siguiente artículo: Cómo insertar una imagen SVG en HTML y CSS.
2. Cómo acceder a Google Fonts Icons
Para comenzar, visita el sitio web de Google Fonts Icons en fonts.google.com/icons y visualiza la biblioteca de más de 2500 iconos.
2.1. Búsqueda de iconos
Puedes buscar iconos específicos utilizando la barra de búsqueda y también mediante las diferentes categorías disponibles en el sidebar izquierdo «Apartado Category».
2.2. Tipos de iconos: estáticos y variables
En Google Fonts Icons, existen dos tipos principales de iconos: estáticos y variables. Veamos sus diferencias:
Iconos estáticos:
En Google Fonts Icons, los iconos estáticos son aquellos con características fijas, como grosor del trazo y relleno, lo que los hace simples de implementar y menos personalizables. Estos iconos son ideales cuando no se necesita una adaptación precisa de sus atributos. Desde CSS, se pueden modificar atributos como el tamaño y el color, pero su diseño básico permanece constante.
Iconos variables:
Los iconos variables de Google Fonts ofrecen la capacidad de ajustar varias características que no son fácilmente modificables en los iconos estáticos. Desde CSS, también se pueden ajustar otros atributos, pero los iconos variables ofrecen una flexibilidad mayor para adaptarse a requerimientos particulares. Veamos que características de los iconos nos permiten modificar:
- Grosor del trazo (Weight): Permite ajustar el grosor de las líneas del icono, desde un trazo fino hasta uno más grueso.
- Relleno (Fill): Permite cambiar el estilo de relleno del icono, desde sin relleno hasta un relleno completo.
- Grado (Grade): Proporciona un ajuste más detallado del grosor del trazo, permitiendo gradaciones sutiles en la apariencia del icono.
- Tamaño óptico (Optical Size): Permite mantener el grosor del trazo consistente a diferentes tamaños, ajustándolo automáticamente según el tamaño del icono.
Estas características se pueden modificar desde el sidebar izquierdo en el apartado «Custom», tal y como veremos en el punto 3.2.
3. Formas de insertar iconos de Google Fonts en tu sitio web
Veamos cómo insertar iconos estáticos e iconos variables en Google Fonts.
3.1. Insertar iconos estáticos
Veamos detalladamente cómo agregar los iconos de forma estática a partir de su nombre (el que aparece bajo del icono en la biblioteca de iconos de Google Fonts fonts.google.com/icons).
3.1.1. Agregar la hoja de estilos en el <head>
Para utilizar los iconos estáticos de Google Fonts, primero necesitas agregar la hoja de estilos en tu página HTML. Para ello, copia y pega el siguiente código en la etiqueta <head> de tu documento:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
3.1.2. Insertar iconos en HTML
Una vez que la hoja de estilos está vinculada, puedes insertar un icono en tu HTML utilizando elementos <i> o <span> con la clase material-icons. Además, debes reemplaza el texto dentro de los elementos <i> o <span> con el nombre del icono que quieras mostrar (nombre que aparece bajo del icono de la página de Google Fonts Icons). Por ejemplo:
<!-- Utilizando el elemento <i> --> <i class="material-icons">home</i> <!-- Utilizando el elemento <span> --> <span class="material-icons">favorite</span>
Ejemplo en CodePen
3.1.3. Personalización de iconos de Google Fonts Icons con CSS
Puedes personalizar los iconos de Google cambiando su tamaño, color, efectos, etc. utilizando CSS. Por ejemplo:
/* Cambiar el tamaño del icono */
.material-icons {
font-size: 36px;
}
/* Cambiar el color del icono */
.material-icons {
color: #ff6347;
}
/* Agregar efecto de sombra al icono */
.material-icons {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
/* Agregar efecto de rotación al icono */
.material-icons {
transform: rotate(45deg);
}
/* Cambiar el color de fondo detrás del icono */
.material-icons {
background-color: #f0f0f0;
padding: 5px;
border-radius: 50%;
color: #333;
}
En esta sección, nos hemos enfocado en el uso de fuentes estáticas para personalizar iconos mediante Google Fonts Icons. Sin embargo, si buscamos un control más preciso sobre ciertos aspectos como el peso, el tamaño o el relleno de los iconos, es recomendable considerar el uso de fuentes variables.
3.2. Insertar iconos variables
Puedes personalizar ciertos aspectos de los iconos variables desde el sidebar izquierdo «Apartado Custom». Esta herramienta de personalización de Google Fonts Icons, cuenta con las secciones «Fill», «Weight», «Grade», «Optical Size», «Filter», «Style», y «Category». Cada una de estas secciones permite ajustar distintos aspectos visuales de los iconos variables.
- Fill (Relleno): Controla el estilo de relleno del icono, permitiendo transiciones entre estados con diferentes niveles de relleno (desde ningún relleno hasta relleno completo).
- Weight (Peso): Define el grosor del trazo del símbolo, con opciones que van desde 100 (fino) hasta 700 (negrita), afectando tanto la apariencia como el tamaño del ícono.
- Grade (Calificación): Ajusta el grosor del símbolo de manera más detallada que el peso, con opciones como -25 (énfasis bajo) y 200 (énfasis alto), que pueden influir en el tamaño y el contraste visual.
- Optical size (Tamaño óptico): Permite mantener un grosor de trazo consistente al escalar el tamaño del icono entre 20px y 48px, asegurando que el ícono se vea bien en diferentes dimensiones.
- Filter (Filtro), Style (Estilo), Category (Categoría): Estas secciones ofrecen filtros adicionales, opciones de estilo y categorización para facilitar la búsqueda y selección de iconos específicos según ciertos criterios.
Cuando encuentras el icono que quieres insertar en tu web, puedes clicar sobre él con el botón izquierdo del ratón y te parecerá un sidebar lateral derecho con todas las opciones de inserción.
4. Integración con frameworks
Los iconos de Google son compatibles con varios frameworks y librerías. Por ejemplo, si estás utilizando Bootstrap, puedes integrar fácilmente los iconos de Google:
<button class="btn btn-primary"> <i class="material-icons">cloud_upload</i> Subir Archivo </button>
5. Mejores prácticas de diseño con iconos
Al incorporar iconos vectoriales en tu sitio web, es importante seguir algunas prácticas recomendadas para garantizar una apariencia visual cohesiva y efectiva en todo el sitio. Aquí hay algunas sugerencias clave:
- Consistencia en tamaño y estilo: Usa tamaños similares para iconos que cumplen funciones similares, como iconos de navegación o de acción. Además, selecciona un estilo de iconos (por ejemplo, llenos, contorneados o mixtos) que se adapte al diseño general de tu sitio y mantén este estilo en toda la interfaz.
- Selección adecuada de iconos: Elige iconos que sean visualmente comprensibles y representativos de su función. Evita la sobrecarga visual al seleccionar solo los iconos necesarios para comunicar claramente la acción o el contenido que representan. Asegúrate de que los iconos sean universalmente reconocibles para la audiencia objetivo.
- Coherencia en la temática: Utiliza iconos que sigan una temática coherente con el estilo general de tu sitio web. Si tu diseño sigue un esquema de color y una estética específica, selecciona iconos que se complementen con estos elementos para lograr una apariencia armoniosa.
- Usabilidad y accesibilidad: Considera la usabilidad y la accesibilidad al elegir y colocar iconos en tu diseño. Asegúrate de que los iconos sean lo suficientemente grandes y claros para ser reconocidos fácilmente, especialmente en dispositivos móviles. Además, utiliza texto alternativo apropiado para los iconos para mejorar la accesibilidad para usuarios con discapacidades visuales. Ejemplo:
<i class="material-icons" alt="Inicio">home</i>
6. Ejemplos prácticos de uso de Google Fonts Icons
Veamos ahora algunos ejemplos prácticos de cómo utilizar los iconos de Google Fonts en diferentes partes de una página web:
6.1. Enlaces y botones
Botón con Icono:
<button class="btn btn-primary"> <i class="material-icons">search</i> Buscar </button>
Enlace con Icono:
<a href="#" class="link"> <i class="material-icons">arrow_forward</i> Ver más </a>
6.2. Menús de navegación
Elemento de menú con icono:
<nav>
<ul>
<li><a href="#"><i class="material-icons">home</i> Inicio</a></li>
<li><a href="#"><i class="material-icons">shopping_cart</i> Tienda</a></li>
<li><a href="#"><i class="material-icons">mail</i> Contacto</a></li>
</ul>
</nav>
6.3. Encabezados y secciones
Encabezado con icono:
<h1> <i class="material-icons">info</i> Acerca de Nosotros </h1>
Sección destacada con icono:
<div class="section"> <i class="material-icons">star</i> <h2>¡Oferta Especial!</h2> <p>Descubre nuestras promociones exclusivas.</p> </div>
6.4. Listas y elementos de contenido:
Elemento de lista con icono:
<ul> <li><i class="material-icons">check_circle</i> Item 1</li> <li><i class="material-icons">check_circle</i> Item 2</li> <li><i class="material-icons">check_circle</i> Item 3</li> </ul>
6.5. Formularios y controles
Campo de Entrada con Icono:
<div class="input-container"> <i class="material-icons">person</i> <input type="text" placeholder="Nombre"> </div>
Botón de envío con icono:
<button type="submit" class="btn btn-primary"> <i class="material-icons">send</i> Enviar </button>
Estos ejemplos muestran cómo integrar iconos de Google Fonts en diferentes partes de una página web. Puedes personalizar estos ejemplos según tus necesidades de diseño y estilo, utilizando CSS para ajustar el tamaño, color y otros aspectos de los iconos según sea necesario.
Ejemplo en CodePen
Espero que hayas encontrado este artículo interesante y útil. Si tienes alguna pregunta o sugerencia, no dudes en ponerte en contacto con nosotros a través del formulario de consulta. Además, si quieres recibir actualizaciones periódicas sobre nuevos contenidos y recursos, te invito a suscribirte a nuestra newsletter.