Topic: Move social icons to footer widget area and change icons

Author

Posts
October 1, 2015 at 12:15 am #605921

Rick M
Participant

Site URL: http://snapoutofitwomen.org

How do I move the “X” Social Icons to the footer widget as I have placed mine as images? And, keep it responsive so the images won’t stack as the screen size is reduced.

How do I change the default icon to my image?

I’m wanting to use the “X” social functionality of the theme and not add the code as I have in the current site.

Or, is there a better way to accomplish my design so I have the social, copyright, terms and conditions and privacy all in the footer?

October 1, 2015 at 12:29 am #605935
Rue Nel
Moderator
Hello There,

Thanks for writing in!

To have X social icons in your footer widget, please turn off first the social icon in your footer. You can do that by going to Appearance > Customize > Footer > Footer Social. Then in your text widget, you can insert the following shortcode:
[x_share title="" facebook="true" twitter="true" google_plus="true" linkedin="true" instagram="true" pinterest="true" reddit="true" email="true"]

If you want to use your own icon, you can use this code:
```
.x-social-global .facebook i:before {
 content: "your-link-to-the-icon-image.jpg";
}

.x-social-global .twitter i:before {
 content: "your-link-to-the-icon-image.jpg";
}

.x-social-global .twitter i:before {
 content: "your-link-to-the-icon-image.jpg";
}

.x-social-global .linkedin i:before {
 content: "your-link-to-the-icon-image.jpg";
}

.x-social-global .youtube i:before {
 content: "your-link-to-the-icon-image.jpg";
}

.x-social-global .instagram i:before {
 content: "your-link-to-the-icon-image.jpg";
}
```
Hope this helps. Please let us know how it goes.
October 3, 2015 at 1:47 am #609049

Rick M
Participant

Sorry I’m not able to get this to work.

I don’t want the share functionality. The social icons are for links to DeDe’s Facebook etc. account.

The short code you provided seems to be for sharing.

To add my own icons, where do I add the code you provided?

October 3, 2015 at 3:04 am #609087
Christopher
Moderator
Hi there,

Please add this in text widget :

<div class="x-social-global"><a href="https://www.facebook.com/pages/DeDe-Murcer-Moffett/468573973177036" class="facebook" title="Facebook" target="_blank"></a><a href="https://twitter.com/DDMurcerMoffett" class="twitter" title="Twitter" target="_blank"></a><a href="http://www.linkedin.com/pub/dede-murcer-moffett/6/915/833" class="linkedin" title="LinkedIn" target="_blank"></a><a href="http://www.youtube.com/user/DeDeMurcerMoffett" class="youtube" title="YouTube" target="_blank"></a><a href="https://instagram.com/dedemurcermoffett/" class="instagram" title="Instagram" target="_blank"></a><a href="http://feeds.feedburner.com/dedemurcermoffett" class="rss" title="RSS" target="_blank"></a></div>

You can edit the code and replace icons.

Add this CSS too:
```
footer .x-social-global a {
 color: red;
 border-radius: 100%;
 width: 35px;
 height: 33px;
 background-color: white;
 padding-top: 4px;
}
```
Hope it helps.
October 4, 2015 at 12:06 am #609862

Rick M
Participant

Now all I see is a round circle, see attached screenshot.

How do I add the icons (http://snapoutofitwomen.org/wp-content/uploads/2015/10/dede-murcer-moffett_you-tube-connection.png) I have in the media folder?

Disregard the attached screenshot… that’s the result of adding the code to the CSS.

October 4, 2015 at 3:32 am #609967
Rue Nel
Moderator
Hello There,

Sorry if it didn’t work out for you. Please use this custom css instead:
```
footer .x-social-global a {
 color: red;
 border-radius: 100%;
 width: 35px;
 height: 33px;
 background-color: white;
 color: #000 !important;
 padding-top: 4px;
 margin: 0 2px;
}

footer .x-social-global a i {
 font-size: 24px;
}
```
Your icons should look like this:

Please let us know if this works out for you.
October 4, 2015 at 9:41 am #610168

Rick M
Participant

Thanks for the effort to use “X” icons but I’d rather use different ones.

What code do I add to use the icons I have uploaded to the media folder?

October 4, 2015 at 9:56 am #610174
Thai
Moderator
Hi Rick,

You can try with the following CSS:
```
footer .x-social-global a {
 color: red;
 border-radius: 100%;
 width: 35px;
 height: 35px;
 background-color: white;
 color: #000 !important;
 margin: 0 2px;
 background-size: 35px;
 font-size: 24px;
}
footer .x-social-global a i {
 display: none;
}
footer .x-social-global a.facebook {
 background-image: url(http://www.your-image-url.com/facebook.png);
}
footer .x-social-global a.twitter {
 background-image: url(http://www.your-image-url.com/twitter.png);
}
footer .x-social-global a.linkedin {
 background-image: url(http://www.your-image-url.com/linkedin.png);
}
footer .x-social-global a.youtube {
 background-image: url(http://www.your-image-url.com/youtube.png);
}
footer .x-social-global a.instagram {
 background-image: url(http://www.your-image-url.com/instagram.png);
}
footer .x-social-global a.rss {
 background-image: url(http://www.your-image-url.com/rss.png);
}
```
You can replace http://www.your-image-url.com/rss.png with your images URL.

Hope it helps!
October 4, 2015 at 9:30 pm #610578

Rick M
Participant

Still not working…

in Customizer>>>Custom>>>CSS I have this code:
footer .x-social-global a {
color: red;
border-radius: 100%;
width: 35px;
height: 35px;
background-color: white;
color: #000 !important;
margin: 0 2px;
background-size: 35px;
font-size: 24px;
}
footer .x-social-global a i {
display: none;
}
footer .x-social-global a.facebook {
background-image: url(http://snapoutofitwomen.org/wp-content/uploads/2015/10/dede-murcer_moffett_facebook-connect.png);
}
footer .x-social-global a.twitter {
background-image: url(http://snapoutofitwomen.org/wp-content/uploads/2015/10/dede-murcer-moffett_twitter-connection.png);
}
footer .x-social-global a.linkedin {
background-image: url(http://snapoutofitwomen.org/wp-content/uploads/2015/10/dede-murcer-moffett_linkdin_connect.png);
}
footer .x-social-global a.youtube {
background-image: url(http://snapoutofitwomen.org/wp-content/uploads/2015/10/dede-murcer-moffett_you-tube-connection.png);
}
footer .x-social-global a.instagram {
background-image: url(https://instagram.com/dedemurcermoffett/);
}
footer .x-social-global a.rss {
background-image: url(http://snapoutofitwomen.org/wp-content/uploads/2015/10/dede-murcer-moffett_rss-connection.png);
}

In text widget I have:

<div class=”x-social-global”></div>

October 4, 2015 at 10:20 pm #610629
Lely
Moderator
Hello Rick,

Upon checking, you still have white background color for the social icons. So your icons is white on white background. That’s why you can’t see it. You may add the following CSS:
```
footer .x-social-global a {
 background-color: transparent;
}
```
Hope this helps.
October 4, 2015 at 11:35 pm #610687

Rick M
Participant

Thanks, that worked!

October 4, 2015 at 11:39 pm #610689

Nico
Moderator

You’re most welcome.

Have a great day! 🙂
Author

Posts