Social Icons Buttons in Text Block

Hey goingthewholehogg,
Is this what you had in mind:

If so, I put a code block in my page and added this code:

<ul class="noLightbox social_bookmarks icon_count_5"><li class="social_bookmarks_twitter av-social-link-twitter social_icon_1"><a target="_blank" href="http://twitter.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Twitter"><span class="avia_hidden_link_text">Twitter</span></a></li><li class="social_bookmarks_facebook av-social-link-facebook social_icon_2"><a target="_blank" href="http://facebook.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Facebook"><span class="avia_hidden_link_text">Facebook</span></a></li><li class="social_bookmarks_pinterest av-social-link-pinterest social_icon_3"><a href="#" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Pinterest"><span class="avia_hidden_link_text">Pinterest</span></a></li><li class="social_bookmarks_instagram av-social-link-instagram social_icon_4"><a href="#" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Instagram"><span class="avia_hidden_link_text">Instagram</span></a></li><li class="social_bookmarks_youtube av-social-link-youtube social_icon_5"><a href="#" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Youtube"><span class="avia_hidden_link_text">Youtube</span></a></li></ul>

(Adjust the url’s to your social site’s)
having already Turned on Custom CSS Class field for all ALB Elements I added the class “custom-social”
Then I added this code in the General Styling > Quick CSS field:

.custom-social .social_icon_1,.custom-social .social_icon_2,.custom-social .social_icon_3,.custom-social .social_icon_4,.custom-social .social_icon_5 { 
font-size: 40px;
border-color: transparent;
}
.main_color .custom-social .social_bookmarks a {
color: #455a64!important; 
}
.avia_codeblock.custom-social {
    width: 400px;
    margin: auto;
}

Best regards,
Mike

Hi,
It should be centered because we have given the code block a width of 400px and margin of auto in the last two lines of code above, did you happen to change those lines or are you missing the last curry bracket? You can try adding !important; to it like this:

.avia_codeblock.custom-social {
    width: 400px!important; 
    margin: auto!important; 
}

If this doesn’t help, Can you please include a admin login in the private content area so we can take a closer look?
Try this code to give them a transparent background color:

#top #wrap_all .custom-social li.av-social-link-youtube:hover a,#top #wrap_all .custom-social .av-social-link-instagram:hover a,#top #wrap_all .custom-social .av-social-link-pinterest:hover a,#top #wrap_all .custom-social .av-social-link-facebook:hover a,#top #wrap_all .custom-social .av-social-link-twitter:hover a {
    background-color: transparent;
}

Best regards,
Mike

Hi,
Please include the url to your site.

Best regards,
Mike

Hi,
I took a look and found that using the text block element added align-left to the code, I replaced with the code block element. It still looked a little off so in the css I changed the width from 400px to 330px, if you wish to adjust, this is the value to do so.
Please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, shall we close this then?

Best regards,
Mike

Hi,
Glad we could help, we will close this now. Thanks for using Enfold.

Best regards,
Mike