How do i replace social media links in navbar with icons?

I have turned on the CSS classes in the Appearance > Menu section.

I have put the social media icon imagery in my Tiny Hestia template img folder, given each one a class and added the below code to my child theme style.css:

.fb-icon a{
	background-image: url(assets/img/fb_icon.png);		
}
		
.ig-icon a{
	background-image: url(assets/img/ig_icon.png);	
}
	
.tw-icon a{
	background-image: url(assets/img/tw_icon.png);		
}

My navbar currently looks like it can see the images and is linking them but maybe the format is wrong or it needs some more styling?

my navbar

I basically want the social media icons to be part of my sticky navigation and just show as icons (without the text)

Thanks

Solution

Beside setting the div size (from Invariant Change's post) you also might want to add font-size:0; to hide the text and background-position: center; so the icon is centered. Also if your icons haven't got the right dimensions to fit a small button you might add background-size: contain; or background-size: 32px; - the first one doesn't let them overflow, the second let's you set a fixed size.

Edit: I forgot about background-repeat: no-repeat; which is quite important as the default behaviour of background-image is repeat (which is good for tiled/pattern backgrounds, not so much for logos). :)

So your resulting code would be:

    .fb-icon a {background-image: url(assets/img/fb_icon.png);} 
    .ig-icon a {background-image: url(assets/img/ig_icon.png);}
    .tw-icon a {background-image: url(assets/img/tw_icon.png);}
    .fb-icon a, .ig-icon a, .tw-icon a {
        height:32px;
        width:32px;
        font-size:0;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }