Footer as page – How to social media icons in a row + tooltip? ( elegant demo )

Hey jeroenvandessel,
To display your social icons in a row, first copy your current social icons in your header by inspecting your page and right clicking to choose “Edit as HTML”

then copy and paste in a code block, here’s an example:

<ul class="noLightbox social_bookmarks icon_count_6"><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_youtube av-social-link-youtube social_icon_3"><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><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_pinterest av-social-link-pinterest social_icon_5"><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_reddit av-social-link-reddit social_icon_6"><a href="#" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Reddit"><span class="avia_hidden_link_text">Reddit</span></a></li></ul>

then add this code in the General Styling > Quick CSS field:

.social_bookmarks li a {
    border-radius: 100px;
}
.social_bookmarks li {
border: none !important; 
}

Expected results:

If you would like to use the larger icons elements use the wand tool in the default editor to get the shortcodes for the icons, and paste into a code block element adding a div with a custom class, here’s an example:

<div class="sbox">
<ul class="avia-icon-list av-iconlist-big">
<li class="avia_start_animation"><a href="https://www.facebook.com/" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a></li>
<li class="avia_start_animation"><a href="https://twitter.com/" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a></li>

<li class="avia_start_animation"><a href="https://plus.google.com/" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a></li>
<li class="avia_start_animation"><a href="https://www.youtube.com/" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a></li>

<li class="avia_start_animation"><a href="https://instagram.com/" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a></li>
<li class="avia_start_animation"><a href="http://tumblr.com/" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a></li>

<li class="avia_start_animation"><a href="https://www.linkedin.com/" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a></li>
<li class="avia_start_animation"><a href="http://www.pinterest.com/" title="" target="_blank" style="background-color:#719430; color:#ffffff; " class="iconlist_icon  avia-font-entypo-fontello"><span class="iconlist-char " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a></li>
</ul></div>

then add this code in the General Styling > Quick CSS field, take note of the custom class for the opening div above:

.sbox ul.avia-icon-list li {
    float: left;
    clear: none;
}

Expected results:

Here is some more info

Best regards,
Mike