Iconos de redes sociales en pie de página: estilo y hover

guillermostore13

¡Hola a todos!

Estoy intentando darle un toque más moderno a los iconos de redes sociales en el pie de página de mi tienda PrestaShop. Quiero que sean insignias circulares y que, al pasar el ratón, adquieran el color oficial de la marca (Facebook azul, Twitter celeste, etc.).

He estado trasteando con el custom.css del tema Classic, pero me encuentro con un problema. Cuando aplico border-radius: 50% y un padding para que el círculo se vea bien, el icono de la fuente (Font Awesome, por ejemplo) se me descentra verticalmente, como si la línea base se moviera. No logro centrarlo perfectamente dentro del círculo.

Este es mi intento actual en themes/classic/assets/css/custom.css:

#footer .social-list li a {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 50%;
    padding: 8px; /* Esto descentra el icono */
    transition: all 0.3s ease;
    color: #7a7a7a;
    text-decoration: none;
}
#footer .social-list li a i {

¿Alguien sabe cómo puedo mantener el icono centrado en el círculo al aplicar estos estilos? Es para PrestaShop 1.7. Muchas gracias.

inmadigital

@guillermostore13 ¡Uff, clásico problema con las fuentes de iconos! Me ha pasado mil veces. El padding es un arma de doble filo aquí, y las fuentes de iconos tienen su propia line-height y vertical-align que a veces se llevan fatal con el box-model estándar.

Antes de nada, ¿qué versión exacta de PrestaShop 1.7 estás usando? A veces hay pequeñas diferencias en el HTML de los módulos entre versiones que pueden afectar a los selectores CSS.

Has probado a ajustar el line-height del <i> o del <a>? O tal vez forzar un display: block y text-align: center en el <i> y luego jugar con vertical-align.

Milo

Hola @guillermostore13 y @inmadigital,

Efectivamente, el problema de la alineación vertical de las fuentes de iconos dentro de elementos con border-radius y padding es muy común en CSS. La clave está en usar display: flex en el elemento contenedor (<a>) para centrar el icono de forma robusta, junto con un width y height fijos para asegurar el círculo perfecto, y box-sizing: border-box para que el padding no altere el tamaño total.

Aquí te dejo una solución que puedes añadir a tu themes/classic/assets/css/custom.css. Esto centrará los iconos y permitirá los colores de marca al pasar el cursor:

#footer .social-list li a {
    display: inline-flex; /* Permite usar flexbox y se comporta como inline */
    align-items: center;   /* Centra verticalmente el contenido (el icono) */
    justify-content: center; /* Centra horizontalmente el contenido (el icono) */
    width: 38px;           /* Ancho fijo para el círculo */
    height: 38px;          /* Alto fijo para el círculo */
    border-radius: 50%;    /* Borde circular */
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    transition: all 0.3s ease;

Explicación de los cambios:

display: inline-flex;: Transforma el enlace <a> en un contenedor flexbox. inline-flex es ideal porque mantiene el comportamiento de inline-block (permite que los elementos fluyan uno al lado del otro) pero con las capacidades de flex para su contenido interno.
align-items: center; y justify-content: center;: Estas propiedades de flexbox centran el icono <i> tanto vertical como horizontalmente dentro del elemento <a>, eliminando el problema de la línea base.
width: 38px; y height: 38px;: Establecen un tamaño fijo para el círculo. Ajusta estos valores si necesitas un tamaño diferente.
box-sizing: border-box;: Crucial para que el padding y el border se incluyan en el width y height total del elemento, garantizando que el círculo mantenga su tamaño definido y no se expanda inesperadamente.
font-size: 18px; en i: Asegura un tamaño de icono consistente. line-height: 1; ayuda a normalizar cualquier diferencia de altura de línea del icono.
Selectores li.redsocial a:hover: Permiten aplicar colores de fondo, texto y borde específicos para cada red social al pasar el cursor, utilizando los selectores de clase que el tema Classic ya aplica a los <li> de la lista social.

Espero que esto te sirva para dejar esos iconos perfectos.

guillermostore13

¡Mil gracias, @Milo! Esa solución con display: inline-flex y align-items/justify-content ha sido la clave. He aplicado el CSS en mi custom.css y ahora los iconos se ven perfectamente centrados y los efectos hover con los colores de marca quedan genial.

Justo lo que necesitaba para darle ese toque pulido al pie de página. El box-sizing: border-box también ha sido un detalle importante que se me pasaba por alto. ¡Funciona de maravilla en mi PrestaShop 1.7.8.6! ¡Gracias de nuevo por la ayuda!