Add text under social link block?

Good day,

I run multiple social media accounts and want them linked to my site: https://www.zacharylaiphotography.com

As you can see I have 2 IG accounts, but there's nothing to differentiate the two visually (both are IG icons) without the user hovering their cursor over the icons to see the difference in URL. This of course is not ideal.

Is there a way to add a text or use different icons to show the difference between the 2 IG accounts?

Thanks

You can use this code to Website > Website Tools > Custom CSS

a.SocialLinks-link.instagram-unauth[href*="zachlaipro"]:after {
    content: "zachlaipro";
    font-size: 10px;
    display: block;
    position: absolute;
    bottom: -10px;
    color: #000;
}
a.SocialLinks-link.instagram-unauth[href*="zachagraphy"]:after {
    content: "zachagraphy";
    font-size: 10px;
    display: block;
    position: absolute;
    bottom: -10px;
    color: #000;
}

a.SocialLinks-link.instagram-unauth {
    overflow: visible !important;
}

nav.SocialLinks {
    overflow: visible;
}

That worked beautifully! Thank you so much.

Is there also a code to make it work for mobile too? Currently it only works for desktop. Also for the smaller social icons at the bottom of the page?

That worked well. Mobile is working too!