Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1214330

    HI
    I am trying to add social media icons/links in a footer widget for Facebook & LInkedIn.
    I found this code, which I put in an HTML widget in footer 2:

    <ul class="noLightbox social_bookmarks icon_count_2">
    <li class="social_bookmarks_facebook av-social-link-facebook social_icon_1"><a aria-label="Link to Facebook" href="https://www.facebook.com/barbarakoegsandersen/" 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_linkedin av-social-link-linkedin social_icon_2"><a aria-label="Link to LinkedIn" href="https://www.linkedin.com/in/barbara-koegs-andersen-69a23a11/" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="LinkedIn"><span class="avia_hidden_link_text">LinkedIn</span></a></li>
    </ul>

    but only the facebook icon is displaying. Can you see what the error is? Is there a better way of doing this –
    I’d ideally like 2 round icons side by side with a 10px gap between them, and a color background (not just on hover).
    How can I do this?
    thanks for your help
    Nancy

    #1215612

    Hey Munford,
    Sorry for the late reply and thanks for the link, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #custom_html-2 .social_bookmarks {
    	display: inline !important;
    }
    #custom_html-2 .social_bookmarks .social_bookmarks_linkedin {
    	clear: right !important;
    }
    #custom_html-2 .social_bookmarks li {
        border-right-style: none !important;
        margin-right: 10px !important;
    }
    #footer .social_bookmarks li a {
      border-radius: 100px!important;
    }
    
    #custom_html-2 .av-social-link-facebook a {
        color: #fff;
        background-color: #37589b !important;
    }
    #custom_html-2 .av-social-link-linkedin a {
        color: #fff;
        background-color: #419cca !important;
    }

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.