Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 19, 2020 at 1:22 pm #1214330
    Munford

    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

    May 23, 2020 at 11:57 pm #1215612
    Mike

    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

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