¿Cómo agrego un ícono, mediante CSS, a enlaces de un sitio web?

Para agregar íconos, automáticamente, a enlaces de un sitio web utilizando CSS, puede usarse el pseudoelemento ::before o ::after en combinación con la propiedad content:

<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        a::after {
            content: url('https://www.dominio.com/icono.png'); /* Corresponde a la URL del ícono */
            display: inline-block;
            margin-left: 5px;
        }
    </style>
    <title>Agregar ícono a enlaces</title>
<head>
<body>
    <p><a href="#">Este es un enlace con un ícono agregado mediante CSS</a></p>
</body>
</html>

Explicación:

a::after - Se utiliza para añadir el contenido luego del texto de cualquier enlace ().
content: url('https://www.dominio.com/icono.png') - Indicamos la URL del contenido a mostrar automáticamente a los enlaces.
display: inline-block - Obliga a que el ícono se comporte como un bloque en línea, permitiendo agregar márgenes, ajustar posición y otras propiedades de bloques.
margin-left: 5px - Añade espacio entre el enlace y el contenido agregado con CSS.

Importante:

Evidentemente, podemos agregar contenidos a enlaces de clases específicas, mediante el atributo class:

HTML:

<p><a href="#" class="enlace_con_icono">Este es un enlace con un ícono agregado mediante CSS</a></p>

CSS:

a.enlace_con_icono::before {
    content: url('URL_DEL_ICONO'); /* Reemplaza 'URL_DEL_ICONO' por la URL del icono que quieras usar */
    display: inline-block;
    margin-right: 5px; /* Espacio entre el icono y el texto del enlace */
}

El debate:

¿Conocías la técnica?
¿La has utilizado antes?
¿Qué otra solución propones?

#CSS #content #after #before #inlineBlock #block #inline #pseudoelementos

Replies (0)