Need help creating custom social icons (with hover color feature)

I found an old thread to change the footer social icons to my own, but I need more help for sure. The icon I inserted went on top of the template icon. I need to get rid of the template icons, add my own, with a hover feature (to be determined), and then I need to link to my social page. What is the best way to do this? I used this CSS for the one Facebook icon that you can see:

i.x-icon-facebook-square{
background: url("http://dev.terislater.com/wp-content/uploads/2017/10/72-RG-typewriter_02.png");
display: inline-block;
width: 70px;
height: 70px;
}

My site can be viewed at: dev.terislater.com

Thanks!

Hi there,

Thanks for writing in.

If it’s about changing the entire icons and it links, then maybe what you need is to completely replace the code and not just by CSS. The question is, should it be applied to footer only or header? That’s because both use the same code, changing the footer icons will also change header icons. I recommend some changes depending on your answer :slight_smile:

Thanks!

Thanks Rad - I would like to go ahead and change them on both the header and footer.

Hi There,

You can try with this CSS:

.x-social-global a,
.x-social-global a:hover {
    background-color: transparent !important;
}

i.x-icon-facebook-square{
    background: url("http://dev.terislater.com/wp-content/uploads/2017/10/72-RG-typewriter_02.png");
    background-size: 100%;
}

i.x-icon-facebook-square:before {
    opacity: 0;
}

And do the same with the other social icons.

Hope it helps :slight_smile:

Thank you SO much! It worked like a charm.

I have one follow-up question though…can it be coded in CSS to have that icon change color when they hover over it? It’s not a necessity… but I might like to know if possible.

Many thanks!

Hi There,

The code for the hover state should be like this:

i.x-icon-facebook-square:hover {
    background: url("http://dev.terislater.com/wp-content/uploads/2017/10/72-RG-typewriter_02.png");
}

Thank you again!!

On behalf of my colleague, you’re welcome. Cheers!

I might have jumped the fun on my excitement… as nothing seems to be happening. . Do I need to do something to signify level of importance? Here’s what I have for EACH icon on my site:
(this should make the icon go from a rose-gold icon to a black icon)

.x-social-global a,
.x-social-global a:hover {
    background-color: transparent !important;
}

i.x-icon-facebook-square{
    background: url("http://dev.terislater.com/wp-content/uploads/2017/10/72-RG-typewriter_02.png");
    background-size: 100%;
}
i.x-icon-facebook-square:before {
    opacity: 0;
}
i.x-icon-facebook-square:hover {
    background: url(“http://dev.terislater.com/wp-content/uploads/2017/11/50-black-typewriter-icon_02.png");
}

Hi there,

The code you used is correct but you used wrong quotation mark for the background URL. You used which is not valid in CSS. You need to use ". See the difference between 2 characters I mentioned?

So if you change the code to:

i.x-icon-facebook-square:hover {
    background: url("http://dev.terislater.com/wp-content/uploads/2017/11/50-black-typewriter-icon_02.png");
}

It will work. But please kindly consider that it might take few seconds to load the image as it tried to load an image on hover.

This is going to be a customization which is outside of our support scope but I want to suggest you use the CSS Spritesheet to achieve the same effect with the background positioning and having the image loaded, so you will not experience that delay.

To get started I suggest that you read this article:

https://www.w3schools.com/css/css_image_sprites.asp

So you will have the images all added to one big image and in each case, you will change the background position property of CSS to change the background position and show the different icon for each case. Also, you can do the same on hover and change the position of the background to show the hovered version of the icon.

For further reading regarding this:

https://www.google.nl/search?q=css+spritesheet&oq=css+spritesheet&aqs=chrome..69i57j0l5.3159j0j7&sourceid=chrome&ie=UTF-8

We will not be able to implement the feature for you but I thought I give you the starter hints so you can develop it yourself.

Thank you,

AH! Wow, who knew?! Thank you again, the " must have changed when I copy/pasted the new url.

Many thanks - this support team is wonderful!!

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.