Add social icons in footer widget

Support
#1

Hello

If you have a look at my current footer at the very bottom it has 3 social icons.

How can I add those in the widget footer?

Thank you!

#2

Hi There,

Please add this HTML code to the text widget:

<div class="x-social-global"><a href="https://www.facebook.com/ArtefactLondon/" class="facebook" title="Facebook" target="_blank" style="outline: none;"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a><a href="https://www.instagram.com/artefactlondon/" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a><a href="https://uk.pinterest.com/ArtefactLondon/" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="" aria-hidden="true"></i></a></div>

After that adding this CSS under X > Theme Options > CSS:

.textwidget .x-social-global {
    text-align: center;
}
.textwidget .x-social-global a {
    font-size: 28px;
    margin: 5px 15px;
    text-decoration: none;
}
.textwidget .x-social-global a:hover {
    opacity: 0.7;
    color: #fff;
}

Let us know how it goes!

#4

thank you! It works now.

How can I centre the icons and increase space between them?

also how to decrease the spacing between the Artefact London Copyright 2018 and the social icons line?

#5

Hello There,

To center the icons and decrease the spacing, please use this code:

div#text-10,
div#text-10 p {
    text-align: center;
    margin-bottom: 10px;
}

Hope this helps.

#6

you are a star!!! Thank you!

#7

You’re most welcome.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.