I want to also know if its possible to make each icon mouse over to another image
i.e black icon base> mouse over = red icon

Please let me know – love X-theme

Thank you for using the support forum!

You can refer to this link on how to create a hover effect using css and html. The example is different but the idea is the same.

http://www.webhostingsecretrevealed.net/blog/web-design/how-to-create-link-with-hover-image-in-plain-css/

You can use the Text widget on Appearance > Widgets to create the html code then add it on Footer Widget Area. Add the css on Customizer > Custom > CSS. Basically, what you have to do is add the html code on the text widget. We will create a facebook icon for example:

<a href="LINK HERE" class="x-footer-social-icons facebook">Facebook</a>

Then referring to the link, add something like this on Customizer > Custom > CSS to:

.x-footer-social-icons.facebook {
 width: 32px;
 height 32px;
 display: block;
 text-indent: -9999px;
 background-image: url(images/facebook-icon.png);
 background-repeat: no-repeat;
 }

Then the hover effect will look like this:

.x-footer-social-icons.facebook:hover {
 background-image: url(images/facebook-icon-hover.png);
 }

You need two images for one social icon. One for the initial display and the other one for the hover effect. You can use sprites but the example above is the simplest example. This needs polishing but it is a start. I hope that helps.

Cheers!

The footer doesn’t have any editable content areas like a post or page. Visual Composer only works in content areas. So, I’m afraid this isn’t possible.

You can change the footer using the options in Customizer > Footer – changes beyond that will take custom code.

Please follow the instructions above then refer to the link that we gave you. If you don’t feel comfortable doing that, please look for a service on Microlancer or Tweaky to assist you with the changes. I’m sorry but custom coding like the one you’re asking is beyond the scope of support as stated in the support policy. The instructions on the tutorial is quite simple and I’m sure you can do it on your own.

Cheers!

You can add the css codes on Customizer > Custom > CSS.

Thanks!

Facebook
.x-footer-social-icons.facebook {
width: 32px;
height 32px;
display: block;
text-indent: -9999px;
background-image: url(images/facebook-icon.png);
background-repeat: no-repeat;
}
.x-footer-social-icons.facebook:hover {
background-image: url(images/facebook-icon-hover.png);
}

and the icons will be aligned on the bottom right of footer? Is it the same process for the top right corner of the header?

Yes, that will be the code needed and same applies to social icons on header. And also assumes that you already have icons placement on footer, else it will work. You could upload your icon at media library and copy its link to be us as background-image.

But if you’re unsure, you could give us your site and icon url and we will give you an exact code.

Thank You.