Change default social media icons to own icon

[sherman1]

I want to change an icon within the "social icons" element to an icon of my own design that when clicked will send the user to a separate site. Though I suppose I want to replace an icon with my own. 

Currently, I have a code within the footer code that sends the user to my separate site, but the hover option is... stupid. If I could find a code to have it function similar to how the regular social icons work, then I wouldn't want to replace one of them. Within my HTML/CSS editor, I think I found that the social icons are not image files, but are instead font files. So... I am unsure how to proceed. Cheers.

[Queso]

Hello sherman! It sounds like you're looking for a code-specific solution. Our Community can likely help out further, but just to clarify, do you specifically want to replace the social icons from the element, or would embedding a custom icon also suit your needs?

[MJCS]

Hi @sherman, 

@Queso asked some good questions​. Do you want to your logo to replace one in a series of social icons or have a separate one?

Can you please proceed your website's address and an indication of where you want the icon.

Lastly, what format is the icon in? .png? .svg?

We should be able to sort something out.

Cheers, Mark

[sherman1]

@Queso

I suppose either way would be okay, that is which is easier. But here is an image of the area in question.

The red is the social media element. I only have icons visible for accounts that I have. The blue is an embed code element that has my own icon which links you to my wordpress. I am hoping to have this icon on the same level as the others. Reason here is aesthetic, and I'm unsure if my current icon reads as a clickable link. Were it inline with the others, it would be obvious. Thus, I assume I need to replace one of the default icons with my own.

@MJCS

My web address is thuspakethezonbi.com

The icon is a .png sized at 30x30

[sherman1]

Sorry for the delay. I assume I live in a much different time zone.

[MJCS]

Hi @sherman,

No problems regarding the delay - I'm in Australia!

I think I've got it working - at least in Chrome's inspector. Here it is:

<style>
.wsite-social-facebook:before {
    content: url(http://www.thuspakethezonbi.com/uploads/1/0/2/4/102421390/published/tstzmain_1.jpg) !important;
    position:absolute !important;
    left: -50px !important;
    top: -20px !important;
}
<style>

Feel free to play with this CSS. You can add it to the Page>SEO>Header Code or the Settings>SEO>Header Code.

 The CSS does this:

• replaces facebook icon with the content - in this case your icon jpg. Change that URL to your icon once you've uploaded it to your Assets.
• Positions it inline with the other icons. You'll need to experiment with the left and top figures to get it aligned.
• It should still be linked to whatever address you added to your facebook icon in the Social Icons which is handy.

I suggest you add an icon to the social icons that you're never going to use, add the address you want your new icon to direct to, then replace it with similar CSS. You can get a list of icon classes here: http://mjcsdemo.weebly.com/social-icons-1.html

Let me know how you go, please.

Regards, Mark

[sherman1]

@MJCS

I sort of have it working now, yet I've been unable to get it to change color on hover. I tried to inspect the element, I use firefox, and found a line of code

.wsite-social-square .wsite-social-linkedin:after,.wsite-social-square.wsite-social-linkedin:after {
    content:"\e602";
    color:#ffffff

which I though I could change the content to the uploaded image url, but no. 

I tried this line of code

.wsite-social-linkedin:hover { color: #fff; background: #0077B5; }

but with the other code inside as well. No.

Any ideas?

[sherman1]

Forgot to mention. I'm living in Japan. I won't look back here until later tomorrow in the afternoon. Looks like you're an hour ahead.

[MJCS]

Hi @sherman,

Good morning, I've got the hover thing working but it's only cooperating when I replace the left most Social Icon. Can you try re-ordering the icons (in the Weebly Editor) to put linkedin at the top - hence left when displayed on your site. Upload another version of your icon, but this time coloured black instead of grey, and then we're going to use the hover to load the black one. You can't change the color of an image, so we'll swap images. I've also changed the position state to relative instead of absolute. Please make that adjustment to the previous rules too.

Try this:

.wsite-social-linkedin:before {
    content: url(https://www.weebly.com/editor/uploads/1/0/2/4/102421390/custom_themes/886967577739467713/files/gficons.png) !important;
    position:relative !important;
}
.wsite-social-linkedin:hover, .wsite-social-linkedin a:hover::before {
    content: url(https://www.weebly.com/editor/uploads/1/0/2/4/102421390/custom_themes/886967577739467713/files/gficonsBLK.png) !important;
    position: relative !important;
}

When I tried it with the right position of icons, it was causing issues with the other icons in terms of spacing and alignment. 

Let me know how you go.

Cheers, Mark

[sherman1]

Afternoon @MJCS,

No change it seems.

I reuploaded two new icons and pasted the code into the header code under SEO settings. Shown below; identical to what you wrote, with the exception of the new icon names. I moved the social icon I am replacing to the top of the list, but there was no change. I had thought of having the code link to a different image, but I had no success either, due primarily to my little knowledge of writing code. I did read about perhaps setting the other image as a background image. Would this be an option? Cheers, indeed.

<style>
.wsite-social-linkedin:before {
    content: url(https://www.weebly.com/editor/uploads/1/0/2/4/102421390/custom_themes/886967577739467713/files/gficon.png) !important;
    position:relative !important;
}
.wsite-social-linkedin:hover, .wsite-social-linkedin a:hover::before {
    content: url(https://www.weebly.com/editor/uploads/1/0/2/4/102421390/custom_themes/886967577739467713/files/gficonBLK.png) !important;
    position: relative !important;
}
</style>

[MJCS]

Oops, sorry @sherman. I've just seen that the web address I suggested was weebly.com. It should have been your address (sorry I've got three people asking for help at once today and I'm losing my train of thought!), .... although I've just had a look at it seems to be working now - did you make that change, or something else?

[sherman1]

@MJCS

Thanks for all the help you're giving. I suppose I confused the matter. I have my icon in the correct place, but the code you listed to have on hover a black icon called doesn't seem to work.

Like you said, I placed the linkedin icon to the top of the list in the social media element order, thus making it on the left. I copied the code you listed and replaced the content: url with the appropriate url.

As you can see I have two icons within my assets. gficon.png and gficonBLK.png. I right clicked and copied the image location, then pasted that image location into the url part of the code you provided. I did this for both the grey and black icons. Yet, on hover, the black icon isn't displayed. Sorry if I had confused you in my last post.  So, yeah.

[MJCS]

Hi @sherman,

I've just reloaded your site and I think it's looking as good as it's going to considering the approach we've used to make it happen. It's very much a 'hack' of the element that was certainly not designed to be edited.

I think that perhaps a better solution to this is going to be to code the whole element yourself and put it in a Custom HTML element. That way you can have total control over it. 

My suggestion is to create all your own icons (png or svg files), upload them to your Assets, and then create code to link them in your page to wherever you want. Are you able to write that sort of HTML markup?

Cheers, Mark

[MJCS]

Hi again, @sherman.

In case you're not confident in the process I explained above this might help...

You could download your own set of icons from here:

https://www.iconfinder.com/iconsets/social-media-free-13

Then modify your own icon to be a similar style and add coding to link the images to wherever you want them to go. This site will give you a good idea of how to do that:

https://www.w3schools.com/html/html_images.asp 

Have a look just past half way down the page for 'Using an Image as a Link'.

Let me know if you get stuck.

Cheers, Mark

[sherman1]

Sorry for the delay. For now I just upIoaded all my icons that I designed. I will look through the link that you sent, but since I am still rathe new to both html and css. I might be able to do, rather clunky, after some referencing of similar mark-ups. Any suggestions on where to start looking for reference? After writing the code do I simply upload it as a new file within the assets? If I can't seem to figure something out, I suppose I will ask for some help here in this thread. Thanks for you help thus so far.

[MJCS]

The best thing to do is to add the coding to an Embed HTML element in the page build tools. If you can wait a bit I should be able to come up with something this weekend. I'm a little busy at the moment. 

Cheers, Mark