Los iconos en HTML son unos elementos visuales versátiles que pueden mejorar la usabilidad, el diseño y la funcionalidad de una web, al tiempo que facilitan la comunicación de información de manera eficiente y atractiva para los usuarios.
La combinación de iconos de fuentes y imágenes te brinda un conjunto versátil de herramientas al crear un sitio web, así que te mostraré cómo usarlas.
![<< [Plantilla gratuita] >> Plantillas de códigos de programación para HTML.](https://no-cache.hubspot.com/cta/default/53/bb3e5cad-5b6c-4956-a702-59b9da03864a.png){kind=small}
Cómo poner un icono en HTML con bibliotecas
1. Selecciona las bibliotecas
Escoge una o varias bibliotecas de fuentes de iconos que desees utilizar, como Font Awesome, Material Icons o Ionic. En este ejemplo, usaremos las dos primeras.
2. Agrega código
Agrega las siguientes líneas en la sección <head> de tu documento HTML para enlazar las bibliotecas de fuentes que desees.
<!-- Enlaza Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- Enlaza Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Ahora que has vinculado las bibliotecas, puedes comenzar a usarlas en tu HTML.
Para Font Awesome, puedes usar la etiqueta <i> o <span> con la clase del icono.
<i class="fas fa-home"></i> <!-- Icono de una casa de Font Awesome -->
<i class="fas fa-envelope"></i> <!-- Icono de un sobre de Font Awesome -->
Para Material Icons, puedes utilizar el elemento <i> o <span> y agregar la clase "material-icons" al elemento. Luego, dentro del elemento, agrega el nombre del icono entre etiquetas de texto.
<i class="material-icons">home</i> <!-- Icono de una casa de Material Icons -->
<i class="material-icons">email</i> <!-- Icono de un sobre de Material Icons -->
3. Personaliza
Puedes personalizar la apariencia de los iconos al emplear CSS, como cambiar el color, el tamaño y otros estilos, de acuerdo con lo que requieras.
Para combinar desde diferentes fuentes, utiliza las clases de las fuentes respectivas en el mismo elemento <i> o <span>.
<i class="fas fa-home"></i> <!-- Icono de una casa de Font Awesome -->
<i class="material-icons">email</i> <!-- Icono de un sobre de Material Icons -->
Ejemplo de iconos en HTML con uso de bibliotecas
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Iconos</title>
<!-- Enlaza Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- Enlaza Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h1>Ejemplo de Iconos</h1>
<p>Icono de una casa de Font Awesome: <i class="fas fa-home"></i></p>
<p>Icono de un sobre de Font Awesome: <i class="fas fa-envelope"></i></p>
<p>Icono de una casa de Material Icons: <i class="material-icons">home</i></p>
<p>Icono de un sobre de Material Icons: <i class="material-icons">email</i></p>
</body>
</html>
A continuación, te muestro una alternativa a este procedimiento.
Cómo poner un icono en HTML con imágenes
1. Guarda tu imagen
Primero, debes tener la imagen que deseas utilizar. Puedes usar un creador de iconos personalizados o descargarlos desde alguna biblioteca donde poseas derechos de uso.
Asegúrate de tener la imagen en una ubicación accesible para tu página web. Puedes subirla al servidor o guardarla en la misma carpeta que tu archivo HTML, si trabajas de manera local.
2. Emplea <img>
Utiliza la etiqueta <img> para insertar la imagen en tu HTML.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icono con Imagen</title>
</head>
<body>
<h1>Icono con Imagen</h1>
<!-- Inserta la imagen como un icono -->
<img src="ruta/a/tu/icono.png" alt="Icono de ejemplo">
</body>
</html>
3. Aplica CSS
Puedes aplicar estilos CSS para cambiar el tamaño, posición, colores u otros efectos visuales. Por ejemplo, puedes utilizar la propiedad width para controlar el tamaño de la imagen.
Ejemplo de iconos en HTML con uso de imagen
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Iconos</title>
<!-- Enlaza Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- Enlaza Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
/* Estilos para los iconos de Font Awesome */
.fa-icon {
color: #007bff; /* Cambia el color a azul */
font-size: 24px; /* Cambia el tamaño de fuente */
margin-right: 10px; /* Espacio a la derecha del icono */
}
/* Estilos para los iconos de Material Icons */
.material-icon {
color: #e91e63; /* Cambia el color a rosa */
font-size: 24px; /* Cambia el tamaño de fuente */
margin-right: 10px; /* Espacio a la derecha del icono */
}
/* Estilos para el icono personalizado con imagen */
.custom-icon {
width: 48px; /* Cambia el tamaño de la imagen a 48px */
height: 48px;
vertical-align: middle; /* Alinea verticalmente con el texto */
margin-right: 10px; /* Espacio a la derecha del icono */
}
</style>
</head>
<body>
<h1>Ejemplo de Iconos</h1>
<p>Icono de una casa de Font Awesome: <i class="fas fa-home fa-icon"></i></p>
<p>Icono de un sobre de Font Awesome: <i class="fas fa-envelope fa-icon"></i></p>
<p>Icono de una casa de Material Icons: <i class="material-icons material-icon">home</i></p>
<p>Icono de un sobre de Material Icons: <i class="material-icons material-icon">email</i></p>
<!-- Icono con una imagen -->
<p>Icono personalizado con imagen: <img src="ruta/a/tu/icono.png" alt="Icono de ejemplo" class="custom-icon"></p>
</body>
</html>
Te recomiendo que personalices los estilos CSS para darle vida a tus iconos HTML y que así se integren armoniosamente en el diseño de tu sitio. Mantén la accesibilidad en mente al proporcionar descripciones adecuadas, así como optimizar su tamaño y legibilidad.
