How to align social icons using custom CSS code?

[franco33]

Hi Guys,

Does anyone know how to fix this problem I am having with the icons not being at the same level, I used a custom CSS code for adding them in.

website url is janustoken.io

i am using this custom code and the shopify ride theme

a.link.list-social__link[href*=“telegram”],
a.link.list-social__link[href*=“discord”] {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

a.link.list-social__link[href*=“telegram”] svg,
a.link.list-social__link[href*=“discord”] svg {
display: none;
}

a.link.list-social__link[href*=“discord”] {
background-image: url(“PASTE-DISCORD-IMAGE-LINK-HERE”);
}

a.link.list-social__link[href*=“telegram”] {
background-image: url(“PASTE-TELEGRAM-IMAGE-LINK-HERE”);
}​

[made4Uo]

Hi @franco33

Please add this to your custom CSS

.list-social__item:has(a.link.list-social__link[href*="telegram"]),
.list-social__item:has(a.link.list-social__link[href*="discord"]) {
    display: flex;
    width: 3.8rem;
    justify-content: center;
}

result here