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.

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>

Dónde conseguir iconos para HTML: ejemplo

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>

Cómo poner un icono en 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.

New Call-to-action
Plantillas de códigos de programación para HTML

Publicado originalmente el 23 de enero de 2024, actualizado el 23 de enero de 2024

Topics:

HTML