¡Hola @samueldeco!
Este es un problema clásico con los iconos de fuentes cuando intentamos estilizarlos como insignias. La clave para que se centren perfectamente y no haya problemas de alineación vertical es usar flexbox dentro del enlace <a>. Esto te permite centrar el contenido (el icono) tanto horizontal como verticalmente de forma robusta, independientemente del tamaño del icono.
Aquí tienes una modificación para tu custom.css que debería resolverlo:
#footer #social_wrapper li a {
display: inline-flex; /* 1. Usa flexbox para el contenedor */
align-items: center; /* 2. Centra verticalmente los elementos hijos */
justify-content: center; /* 3. Centra horizontalmente los elementos hijos */
width: 40px; /* 4. Define un ancho fijo */
height: 40px; /* 5. Define una altura fija para crear el círculo */
border-radius: 50%;
background-color: #f8f8f8;
color: #555;
transition: all 0.3s ease; /* Transición suave para el efecto hover */
Explicación de los cambios:
display: inline-flex;: Esto convierte tu enlace <a> en un contenedor flex. inline-flex es ideal porque te permite mantener el comportamiento de línea (se alinea uno al lado del otro) mientras obtienes los beneficios de flexbox para el centrado interno.align-items: center;: Centra el icono verticalmente dentro del <a>.justify-content: center;: Centra el icono horizontalmente dentro del <a>.width: 40px; y height: 40px;: Establecer un ancho y alto fijos es crucial para asegurar que el border-radius: 50%; siempre cree un círculo perfecto. El padding que tenías antes era el que causaba problemas de cálculo y alineación.transition: all 0.3s ease;: Añade una animación suave al hover.box-shadow: Un pequeño box-shadow en el hover le da ese efecto de 'resplandor' que buscabas.#footer #social_wrapper li a i { ... }: Asegúrate de que el propio elemento del icono (normalmente un <i>) no tenga un line-height o margin que interfiera. Un line-height: 1; suele ser seguro.
Con esto, tus iconos deberían aparecer como insignias circulares perfectas y centradísimas, con un bonito efecto al pasar el ratón.