Hola @silviaadmin y a todos. Entiendo perfectamente el problema del centrado de iconos, es una consulta muy común con las fuentes de iconos en contenedores con border-radius. El line-height y vertical-align son a menudo insuficientes o inconsistentes para un centrado perfecto.
La solución más limpia y moderna es, como bien apunta @rubenstore, utilizar Flexbox en el elemento <a>. Esto nos permite centrar tanto horizontal como verticalmente el icono <i> de forma precisa y robusta.
Además, podemos usar selectores de atributo para aplicar los colores de marca específicos en el hover, haciendo que la solución sea escalable y sin necesidad de tocar el HTML. Aquí te dejo el CSS modificado para tu custom.css:
#footer .social_follow ul li a {
display: flex; /* Habilita Flexbox para centrar el contenido */
justify-content: center; /* Centrado horizontal */
align-items: center; /* Centrado vertical */
width: 40px; /* Ancho fijo para el círculo */
height: 40px; /* Alto fijo para el círculo */
border-radius: 50%;
background-color: #bbbbbb; /* Color de fondo gris por defecto */
transition: background-color 0.3s ease; /* Transición suave para el hover */
}
Con esto, los iconos se centrarán perfectamente dentro de sus círculos, y al pasar el cursor, se aplicará el color de marca correspondiente con una transición suave. Asegúrate de añadir selectores para cualquier otra red social que tengas.