Social Media Icons added to footer but get cut off after size change

Good Morning to the support team!
I wanted to add social media icons to the last column of a 4 column footer widget.
So far everything went without problem after following some other threads here in this forum.

What I did so far :

Added the social icons to a text widget via HTML Code (links edited for privacy):

<ul id=”custom_links” class=”noLightbox social_bookmarks icon_count_4″>
<li class=”social_bookmarks_linkedin av-social-link-linkedin social_icon_1″><span class=”avia_hidden_link_text”>LinkedIn</span>
<li class=”social_bookmarks_youtube av-social-link-youtube social_icon_2″><span class=”avia_hidden_link_text”>Youtube</span>
<li class=”social_bookmarks_instagram av-social-link-instagram social_icon_3″><span class=”avia_hidden_link_text”>Instagram</span>
<li class=”social_bookmarks_facebook av-social-link-facebook social_icon_4″><span class=”avia_hidden_link_text”>Facebook</span>

Used these modifiers to get the look i was going for:

/* Idle (all links) */
#custom_links li a {
background: white !important;
color: #5e5e5f;
}

/* Hover(all links) */
#custom_links li a:hover {
background: #da291c !important;
color: white !important;
}

.widget .social_bookmarks li { clear: none !important; }

#footer .social_bookmarks li {
border: none;
font-size:30px!important;
}

#footer .social_bookmarks li a {
width: 50px;
line-height: 50px;
}
#footer .social_bookmarks li {
width: 50px;
height: 50px;
}

But now, while the size, color, hoverstate etc. is the way I want it, half of the icons are cut off.

Any advice in how to fix this?