Social media to the widgets in footer

[anni]

Hi!

Is there a way to get the social media icons to the widget area in footer? The pages is:
http://demo.finnguru.fi/x/#/content/529/inspector

I also would like to change the color of the social media to blue.

[ruenel]

Hello Anni,

Thanks for writing in!

To resolve your issue, please go to your Appearance > Widgets and insert a html widget to one of the footer widget where you want to place the social icon. You can then insert this html code:

<div class="x-social-global">
	<a href="https://www.facebook.com/finnguru/" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon-b="&#xf082;" aria-hidden="true"></i></a>
	<a href="https://twitter.com/elisa_wilen/" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon-b="&#xf081;" aria-hidden="true"></i></a>
	<a href="https://www.linkedin.com/in/elisa-wilen/" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon-b="&#xf08c;" aria-hidden="true"></i></a>
	<a href="https://www.instagram.com/finnguru/" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon-b="&#xf16d;" aria-hidden="true"></i></a>
</div>

And then, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.widget .x-social-global {
    margin: 10px 0;
}

.widget .x-social-global a {
    margin: 0 1.25%;
    font-size: 21px;
}

.widget .x-social-global a {
    color: blue;
}

.widget .x-social-global a:hover {
    color: red;
}

And then go to X > Theme Options > Footer and disable the Bottom Footer.

We would loved to know if this has work for you. Thank you.