Hola @teresa_moda, bienvenida al foro.
Efectivamente, el problema que describes es muy común cuando se intenta un centrado preciso con iconos de fuente y se combinan propiedades como line-height y border-radius. Como bien han apuntado @marta_tienda30 y @guillermo_lab, la manera más robusta y estándar de lograr un centrado perfecto en estos casos es utilizando flexbox.
Tu snippet actual usa display: inline-block en el <a> y line-height para el centrado vertical. Esto puede funcionar para texto simple, pero con un <i> (que es un elemento inline por defecto y tiene su propia métrica de fuente), la alineación vertical es inconsistente.
La solución pasa por cambiar el display del <a> a flex y luego usar justify-content y align-items para el centrado perfecto del icono. Aquí tienes el CSS corregido para tu custom.css:
/* Estilo base para los enlaces de redes sociales en el pie de página */
.social-media-links li a {
display: flex; /* Cambia a flexbox para un centrado más fácil */
justify-content: center; /* Centra el contenido horizontalmente */
align-items: center; /* Centra el contenido verticalmente */
width: 36px; /* Ancho deseado del badge circular */
height: 36px; /* Altura deseada, igual al ancho para un círculo perfecto */
border-radius: 50%; /* Bordes completamente redondeados */
background-color: #d1d1d1; /* Color de fondo gris claro por defecto */
color: #ffffff; /* Color del icono blanco por defecto */
Con display: flex, justify-content: center y align-items: center, el icono <i> se centrará perfectamente dentro de su contenedor <a> sin importar la fuente. El line-height: 1; en el icono ayuda a asegurar que no tenga un espacio extra que pueda afectar el centrado. He añadido también ejemplos de cómo aplicar colores de marca específicos al pasar el ratón, seleccionando el enlace por su atributo href.