Print Page - Adding a new Footer Icon in v1.2.2

Title: Adding a new Footer Icon in v1.2.2
Post by: jaysbar on June 19, 2015, 07:38:34 AM

Hi All,

I want to add more icons to the Footer Icon block (i.e Instagram).

I can edit the Social Icons block and add my new URL:
<a href="http://www.instagram.com/" target="_blank" title="Instagram" class="Instagram">Instagram</a>

I can see that Social Icons have a CSS = /Storefront/View/Default/Stylesheet/Style.css

I can see the the CSS is calling /Storefront/View/Default/Image/footericon.png

Footericon.png is a single image containing lots of social icons.

How can I tell my new Instagram URL to call the correct icon from Footericon.png? I do not want to add an src= tag at the end of my URL because I want to keep the code as normal as possible.

Any help would be appreciated.

Thanks

Title: Re: Adding a new Footer Icon in v1.2.2
Post by: Basara on June 19, 2015, 09:04:31 AM

Hello.

You need to edit /Storefront/View/Default/Image/footericon.png image
and change css

Title: Re: Adding a new Footer Icon in v1.2.2
Post by: jaysbar on June 19, 2015, 10:43:05 AM

WOW! That wasn't quick or easy! But I owe myself a pint today!

I replaced the Dig icon with the Instagram icon. Added the URL to the social_icons block. Changed the word Dig to Instagram in style.css.

All working!

I love AbanteCart! What an awesome script....

Title: Re: Adding a new Footer Icon in v1.2.2
Post by: leinkell on August 25, 2017, 03:31:28 PM

Quote from: jaysbar on June 19, 2015, 10:43:05 AM
WOW! That wasn't quick or easy! But I owe myself a pint today!

I replaced the Dig icon with the Instagram icon. Added the URL to the social_icons block. Changed the word Dig to Instagram in style.css.

All working!

I love AbanteCart! What an awesome script....

Greetings, please help me in how you did to change the icon and / or add instagram. Thanks in advance

Title: Re: Adding a new Footer Icon in v1.2.2
Post by: udecomey on December 21, 2017, 11:09:25 PM

Quote from: jaysbar on June 19, 2015, 10:43:05 AM
WOW! That wasn't quick or easy! But I owe myself a pint today!

I replaced the Dig icon with the Instagram icon. Added the URL to the social_icons block. Changed the word Dig to Instagram in style.css.

All working!

I love AbanteCart! What an awesome script....

Hi...
can u share also how you do this?

Title: how to Add instagram removing other icons
Post by: adnan on May 16, 2018, 05:00:59 AM

please guide the steps to add instagram icon and the link for instagram.

for facebook it was already there by default. not for instagram .

request to give the steps to add similar for instagram

Title: Re: Adding a new Footer Icon in v1.2.2
Post by: uyko76 on December 28, 2020, 04:20:45 PM

here is the footericon.png file with the Instagram image.
replace this file with the old one.

in style.css file replace the dig to Instagram.

clear your cache and reload it.

Title: Re: Adding a new Footer Icon in v1.2.2
Post by: amethyst on March 30, 2021, 06:21:06 PM

Hello - I have read this thread but don't understand how to do it. I added the URL etc into code and that part works. When I call up my website I get 2 FB icons - one is normal and the other cut off. One leads to my FB and one leads t my Instagram.

Anyway, I just have no idea how to make the changes suggested to the image file or the CSS?

Please help - thanks so much.

/Storefront/View/Default/Stylesheet/Style.css How do I get to this? And how do I add the new footer icon image ???

AbanteCart Community

Shopping Cart Operations => Support => General Support => Topic started by: jaysbar on June 19, 2015, 07:38:34 AM