Hola @monica_admin y @alvaropro,
El problema que describes es un clásico con las fuentes de iconos y el modelo de caja. El line-height y vertical-align en inline-block a menudo no se comportan como esperamos para un centrado perfecto, especialmente si el icono tiene un tamaño inherente que no coincide exactamente con el font-size o la altura del contenedor.
La clave está en asegurarnos de que el <i> (o el elemento que representa el icono) también respete las dimensiones y el centrado. Una forma robusta de hacerlo es aplicando display: flex al <a> contenedor y usando las propiedades de alineación de flexbox, que simplifican mucho el centrado vertical y horizontal.
Aquí tienes una modificación para tu custom.css que debería resolverlo:
.social-media-links li a {
display: flex; /* Usamos flexbox para centrar fácilmente */
align-items: center; /* Centra verticalmente */
justify-content: center; /* Centra horizontalmente */
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #ccc;
color: #fff;
transition: all 0.3s ease; /* Transición suave para el hover */
Con display: flex, align-items: center y justify-content: center en el <a>, el contenido interno (el icono <i>) se centrará perfectamente dentro del círculo sin importar su tamaño o línea base. He añadido también una transición y un transform: scale para un efecto de brillo más dinámico al pasar el cursor. Asegúrate de ajustar el font-size del <i> si tus iconos se ven muy pequeños o grandes.