Añadir Iconos e Imágenes a tu Página Web en HTML

Tabla de contenidos

1 1. Selección de Iconos con Tabler Icons
2 2. Añadir Iconos en la Sección de Cursos, Tutoriales y Blog
3 3. Personalización de los Iconos
4 4. Opciones Alternativas para Iconos
5 5. Añadir Imágenes
6 6. HTML Completo con Iconos

1. Selección de Iconos con Tabler Icons

Para comenzar, utilizaremos la web Tabler Icons para añadir iconos a nuestra página web. Estos iconos se pueden personalizar y utilizar de forma gratuita.

Ve a la página Tabler Icons.
Busca el icono deseado, en este caso, buscamos el icono de Home (sofá).
Copia el código SVG que aparece al seleccionar el icono y personaliza el color y tamaño según tu preferencia.
Pega el código en el lugar correspondiente dentro del HTML. En este caso, el icono va antes del párrafo del contenido.

<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <!-- Aquí va el contenido SVG -->
</svg>

2. Añadir Iconos en la Sección de Cursos, Tutoriales y Blog

Vamos a añadir iconos representativos para las secciones Cursos, Tutoriales y Blog.

Para Cursos, busca un icono relacionado (como un libro) y repite el proceso:

Busca el icono en Tabler Icons.
Personaliza el color y tamaño.
Pega el código antes del texto correspondiente.

<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <!-- Aquí va el contenido SVG para el icono de Cursos -->
</svg>
<p>Cursos</p>

Repite el proceso para las secciones Tutoriales y Blog, buscando iconos adecuados y añadiendo el código de la misma manera.

<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <!-- Aquí va el contenido SVG para el icono de Tutoriales -->
</svg>
<p>Tutoriales</p>

<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <!-- Aquí va el contenido SVG para el icono de Blog -->
</svg>
<p>Blog</p>

3. Personalización de los Iconos

Los iconos pueden personalizarse fácilmente cambiando su tamaño y color directamente en el código SVG. Aquí te explico cómo:

Para cambiar el tamaño, modifica los atributos width y height en el código SVG.

  <svg width="80" height="80" ...> <!-- Icono más grande -->

Para cambiar el color, ajusta el valor del atributo stroke. Puedes usar colores en formato hexadecimal (#000000 para negro) o nombres de color.

  <svg stroke="#FF0000" ...> <!-- Icono rojo -->

4. Opciones Alternativas para Iconos

Además de Tabler Icons, puedes utilizar otras plataformas como FontAwesome. Esta plataforma ofrece una amplia variedad de iconos, algunos gratuitos y otros de pago.

Visita FontAwesome para explorar más iconos.
Descarga los que prefieras y úsalos en tu proyecto.

5. Añadir Imágenes

Si quieres utilizar imágenes en lugar de iconos, puedes descargar imágenes de bancos gratuitos como Unsplash.

Selecciona la imagen que desees.
Inserta la imagen en tu HTML utilizando la etiqueta <img>:

<img src="url_de_la_imagen" alt="Descripción de la imagen" width="200" height="200">

6. HTML Completo con Iconos

Aquí está el HTML completo con los iconos añadidos:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página con Iconos</title>
</head>
<body>

    <header>
        <h1>Formación <span>Online</span></h1>
    </header>

    <nav>
        Navegación
    </nav>

    <section>
        <h2>Formación Online a tu ritmo</h2>
        <p>Aprende desde casa</p>
    </section>

    <main>
        <h2>Mi contenido</h2>

        <section>
            <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <!-- Icono de Cursos -->
            </svg>
            <p>Cursos</p>
        </section>

        <section>
            <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <!-- Icono de Tutoriales -->
            </svg>
            <p>Tutoriales</p>
        </section>

        <section>
            <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <!-- Icono de Blog -->
            </svg>
            <p>Blog</p>
        </section>

        <section>
            <h2>Contacto</h2>
            <!-- Aquí irá el formulario de contacto -->
        </section>
    </main>

    <footer>
        <p>Todos los derechos reservados</p>
    </footer>

</body>
</html>