[itsoktostop]

Placed my website in the private content of this post.

I’m looking to place a customized Amazon icon at the bottom instead of the youtube icon, to take my readers to a merch area I’m working on. I cannot figure out how to customize or add my own icon. In addition, or to maybe find a generic shopping cart icon.

Also, the Page navigation icons are missing and I cannot locate those either. I do see there is a package to download and upload but I can’t figure that out either.

I’ve been trying by trial and error for many days. Are there simple instructions you can direct me to? I’m not experienced in coding at all but can follow specific directions.

Once I get this fixed then I can begin to add and fix a few things I know how and move into starting my blog posts. Thanks!

[serkan]

Hi,
Could you check out this related topic;
http://www.pixelwars.org/forums/topic/add-social-icon/
You can run the one click demo import plugin once and have the same demo data like ours. If you still have trouble, provide me your wp admin details via our private content box below.
Thanks

[itsoktostop]

Where to I edit my css? Via the visual or theme editor?

[itsoktostop]

I’ve got it there… but it’s way off center and when I hover over it, it disappears. How can I correct that?

[itsoktostop]

I’m sorry to keep posting. I’ve now got it all there. However, when I hover over it, it repeats. I placed this in.

.social li a.youtube { text-indent: -999em;background-image: url(“http://itsoktostop.com/wp-content/uploads/2020/01/amazon-icon-png-82.png”) !important;background-repeat: no-repeat;background-position: center center;background-size: 14px 14px !important;}

How can I stop it from doing this once I hover over it?

[serkan]

Hi,
I could not access your website. Could you please provide me your wp admin details via our private content box below?
Thanks

[itsoktostop]

It’s hosted. When you hover over the icon on a computer (not mobile) instead of changing it’s brightness like the others, it changes into about four attached icons of the same. Like it duplicates itself upon hovering over it. Again is the social icon at the bottom of the left nav bar.

To get the amazon icon in there I used the exact code above. I changed youtube for my icon. This exact sequence of code was put in the Additional CSS area of the customize theme (live editor).

I added this per the other threads suggestion. Customize>Additional CSS>

.social li a.youtube { text-indent: -999em;background-image: url(“http://itsoktostop.com/wp-content/uploads/2020/01/amazon-icon-png-82.png”) !important;background-repeat: no-repeat;background-position: center center;background-size: 14px 14px !important;}

This is what it looks like on my website http://itsoktostop.com Now in Customize>Widgets>Footer Social Icons>Text>

[social_icon first_icon="yes" type="facebook" url="https://www.facebook.com/itsoktostop"]
[social_icon type="instagram" url="https://www.instagram.com/its.ok.to.stop/"]
[social_icon type="pinterest" url="https://www.pinterest.com/itsokstostop/"]
[social_icon last_icon="yes" type="youtube" url="https://www.amazon.com/s?rh=n%3A7141123011%2Cp_4%3Aitsoktostop&ref=w_bl_sl_s_ap_web_7141123011"]

[serkan]

Hi,
We can prevent the double background issue with this custom css code;

.header .header-bottom .social li a:hover { background-repeat: no-repeat; }
.header .social li a { line-height: 14px; }

P.S. It won’t be change the lightning feature when you hover the Amazon icon because it is JPEG instead of icons.
Thanks for your understanding.

[itsoktostop]

That’s ok, I do understand and I did forget to make it an icon.. Thanks the double background is fixed. I appreciate you guys.

[serkan]

You’re welcome, please don’t forget to rate the theme on themeforest if you liked it, thanks.