Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1210036


    I am using the Enfold Theme and would like to add the URLs / Icons of my Social Media Profiles at two different places on my website (beside header and footer). Unfortunately so far I haven’t found any solution.

    Do you have any code snippet I can use to add these social media bookmarks at random places on my website? I found previous threads with some of the icons, but I need Facebook, Instagram, Twitter, YouTube and LinkedIN.



    Hey sealmaster,

    There’s no shortcode or element for in ALB, however you can use this HTML code and put it inside a Code Block (just replace the # inside href):

    <ul class="noLightbox social_bookmarks icon_count_5">
    <li class="social_bookmarks_facebook av-social-link-facebook social_icon_1"><a aria-label="Link to Facebook" href="#" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="Facebook"><span class="avia_hidden_link_text">Facebook</span></a></li>
    <li class="social_bookmarks_instagram av-social-link-instagram social_icon_2"><a aria-label="Link to Instagram" href="#" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="Instagram"><span class="avia_hidden_link_text">Instagram</span></a></li>
    <li class="social_bookmarks_twitter av-social-link-twitter social_icon_3"><a target="_blank" aria-label="Link to Twitter" href="#" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="Twitter" rel="noopener noreferrer"><span class="avia_hidden_link_text">Twitter</span></a></li>
    <li class="social_bookmarks_youtube av-social-link-youtube social_icon_4"><a aria-label="Link to Youtube" href="#" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="Youtube"><span class="avia_hidden_link_text">Youtube</span></a></li>
    <li class="social_bookmarks_linkedin av-social-link-linkedin social_icon_5"><a aria-label="Link to LinkedIn" href="#" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="LinkedIn"><span class="avia_hidden_link_text">LinkedIn</span></a></li>

    Hope it helps.

    Best regards,


    Hello Nikko,

    is there a easy and secure way to increase the size of the icons? I want to add very big icons into the footer.




    You can enable debugging mode by referring to this post – which would then display shortcodes right below ALB. You can create your icon elements, copy their shortcode from debug field and paste it in HTML widget in Footer widget areas in Appearance > Widget




    Thank you for the solution, that works! However, is there a way to change the color of the icon from gray to white? The hover effects are great, but I can’t seem to change the gray color.



    Hi sealmaster,

    Please add this CSS code in Quick CSS, located in Enfold > General Styling:

    #top #wrap_all #main .social_bookmarks a {
        color: white;

    Hope this helps.

    Best regards,

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.