sOCIAL MEDIA BUTTONS

[LBRUCE5]

I am trying to change the social media buttons. I do not use skype and a few of the other buttons listed but I do use instagram and a few different one. I would like to add custom buttons. How would I be able to achieve doing this. This is one of my many concerns but social media is the most important part of any business at this time.

Your help is most appreciated, Thank everyone in advance

[Loreto]

I think you can do it in the "design"--> Layouts, and the put the cursor over the "html...social icons" and click edit in the popup window, the you can edit the html block, sure there is another way, but this is the way I do. 

[LBRUCE5]

Thank You very much for your help. I have in fact found a way that is more direct to what I have been looking to do with my site. If anyone need help with changing the icons feel free to message me and I will be sure to help and talk you through it. I will be making a video about it soon and I will post it here for everyone to view. Hope this helps everyone out.

[Riin]

I think you can do it in the "design"--> Layouts, and the put the cursor over the "html...social icons" and click edit in the popup window, the you can edit the html block, sure there is another way, but this is the way I do. 

I could only figure out how to change the links there, not the actual icons. How *does* one change the icons?

Thanks.

Riin

[Riin]

Can anyone help with this? I need to add Pinterest and Ravelry icons. I tried replacing default_html5/image/footericon.png with a new image, but now no icons appear. Anyone? Help?

[abantecart]

What is the problem with Loreto suggestion?

[Riin]

I don't understand where you actually change the icons that way. I only see where to change the links.

[Basara]

I don't understand where you actually change the icons that way. I only see where to change the links.

Icons are showing using CSS rules

Code Select Expand

<a href="http://www.facebook.com/AbanteCart" target="_blank" title="Facebook" class="facebook">Facebook</a> see the CSS class="facebook" ?
To add your own image upload it to the server ../resources/image/ folder then use simple HTML code to insert image
something like this

Code Select Expand

<a href="http://www.facebook.com/AbanteCart" target="_blank" title="Facebook"><img src="http://www.yoursite.com/resources/image/newicon.png" alt="Smiley face" width="42" height="42">
</a>

[Riin]

Oh! Duh!

Thanks!

[Riin]

Ok, I did that, but now there are really big spaces between the icons. My icons are 32 x 32 pixels, and the spaces are approximately 45 pixels wide. I looked in the stylesheet to see if I could adjust it, but the stylesheet doesn't think those big spaces are there. Any recommendations on how to make those spaces a lot smaller?

[Basara]

This is related to your HTML code. Try to inspect element in your browser or install Firebug browser addon to check where is problem

[Riin]

I installed Firebug and found the width of the icon area specified under DOM, but it won't let me edit it there, and it's not at all clear to me where I'm supposed to edit it.

[Riin]

Also, I found out the icons aren't showing up on all browsers. When I look at my site on Firefox on my Mac, they're there. When I look on my ipad, there are blank squares where the icons should be. On my assistant's PC, with IE 11, they were just broken image links, and when she looked at it with Firefox, they were just text links. So now what?

[Basara]

Hi.
Please post your site url and html code from html icons block.

[Riin]

I finally ended up just putting the links in the footer and skipping the block.