Iconos sociales pie de página: brillo y distintivos circulares

ana_cart

Hola a todos,

Estoy intentando darle un aspecto más moderno a los iconos de redes sociales del pie de página en mi tienda. Quiero que sean círculos y que, al pasar el ratón, tengan un efecto de brillo con el color de la marca. He logrado que sean circulares y cambien de color, pero los iconos dentro de los círculos (Facebook, Twitter, etc.) no se centran verticalmente del todo, y parece que la línea base se mueve un poco.

Estoy trabajando en el tema Classic y he añadido esto a themes/classic/assets/css/custom.css:

#social_wrapper li a {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  background-color: #f0f0f0;
  color: #555;
  transition: all 0.3s ease;

¿Alguna idea de por qué los iconos (que son  dentro del <a>) no quedan perfectamente centrados en el círculo? Lo he probado con vertical-align: middle; pero no mejora mucho.

patriciadigital

Hola @ana_cart,

Es un problema común con los iconos de fuentes. A veces, el line-height y el vertical-align no se aplican como uno esperaría en el elemento  cuando su padre es un inline-block. La estructura del icono de la fuente a menudo tiene su propio line-height o un vertical-align predeterminado que es difícil de anular sin ser más específico.

¿En qué versión de PrestaShop estás? Y, ¿has intentado inspeccionar el elemento  directamente en el navegador para ver sus estilos calculados? Puede que haya algo en la hoja de estilos base del tema Classic que esté creando un conflicto.

Milo

Hola @ana_cart y @patriciadigital,

El problema que describes es muy habitual al intentar centrar iconos de fuentes dentro de contenedores con border-radius y line-height. Los elementos  (que suelen ser los iconos de FontAwesome en Classic) tienen un comportamiento de línea base que a menudo causa este pequeño desajuste visual, incluso con line-height y vertical-align: middle en el <a> padre.

Para PrestaShop 8.1.7 (y versiones similares), la forma más robusta y moderna de centrar estos iconos es utilizando Flexbox en el elemento <a>. Esto garantiza que el contenido interno (el ) se centre perfectamente tanto vertical como horizontalmente, independientemente de la fuente o el tamaño del icono. Además, ajustaremos el efecto de brillo.

Aquí tienes el código CSS corregido para themes/classic/assets/css/custom.css:

#social_wrapper li a {
  display: flex; /* Usamos Flexbox para centrar el contenido */
  justify-content: center; /* Centrado horizontal */
  align-items: center; /* Centrado vertical */
  width: 36px;
  height: 36px;
  /* line-height ya no es necesario para centrar verticalmente */
  border-radius: 50%;
  background-color: #f0f0f0;
  color: #555;

Con display: flex, justify-content: center y align-items: center en el <a>, el icono  se centrará automáticamente. He aumentado ligeramente el box-shadow para que el efecto de brillo sea un poco más visible y he añadido un transform: translateY(-2px) para un sutil efecto de elevación al pasar el ratón. Esto te dará el resultado deseado de forma consistente.

ana_cart

¡Increíble, @Milo! Lo he probado ahora mismo y funciona a la perfección. Los iconos están perfectamente centrados y el efecto de elevación le da un toque muy chulo. Exactamente lo que buscaba.

Muchísimas gracias por la explicación tan clara y la solución con Flexbox. ¡Problema resuelto!