Que tal @antonio_bcn, @pabloweb88 tiene razón. El problema principal es que los enlaces <a> son elementos inline por defecto. Para que border-radius, padding y width/height se comporten como esperas en un círculo, necesitas que el elemento sea block o, mejor aún, flex para un centrado sencillo.
Además, para el efecto de brillo, box-shadow es la propiedad CSS ideal. Te propongo una solución limpia y eficiente para tu themes/classic/assets/css/custom.css que los convertirá en insignias circulares con el color de marca y un brillo suave al pasar el ratón:
.social-link a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #ccc;
color: #555;
transition: all 0.3s ease;
Explicación de los cambios:
display: inline-flex;: Esto transforma el enlace en un contenedor flexbox inline, permitiendo que width, height y border-radius funcionen correctamente, y que align-items y justify-content centren el icono.align-items: center; y justify-content: center;: Centran el icono de forma perfecta tanto vertical como horizontalmente dentro de la insignia.width: 36px; y height: 36px;: Definen un tamaño fijo para la insignia, asegurando que border-radius: 50%; cree un círculo perfecto.transition: all 0.3s ease;: Añade una transición suave a todos los cambios de propiedades CSS (color, fondo, sombra) para un efecto más pulido al pasar el ratón.box-shadow: 0 0 12px rgba(0, 123, 255, 0.7);: Crea el efecto de brillo. Los primeros dos 0 son para offset X e Y, 12px es el radio de difuminado, y rgba() permite especificar el color (aquí un azul semitransparente) y la opacidad (0.7).
Con estos estilos, tus iconos se verán como insignias circulares bien centradas y con un efecto de brillo muy profesional al interactuar con ellos.