creating custom social icon image

Hi i have added a social link to my Alamy site on my website but it comes up with the generic squarespace link icon. I have found some mentions on the forum about being able to change the icon image with css and linking it to a flaticon but i can't see the actual css or process to follow, so would be grateful for some suggestions.

You can use FontAwesome icon or Flaticon image.

First, add this code to Code Injection Header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Next, add normal icon

Then, share link to your site, I need to check your site to give exactly Font code

Thanks. Site is https://purple-chinchilla-4bnr.squarespace.com/ and password London2019.

Link is in the footer for each page.

I haven't added the code yet. And if you can explain how to add the icon as well that would be great. Will look up how to use FontAwesome Icon as not come across that so far.

36 minutes ago, IvanOB said:

Thanks. Site is https://purple-chinchilla-4bnr.squarespace.com/ and password London2019.

Link is in the footer for each page.

I haven't added the code yet. And if you can explain how to add the icon as well that would be great. Will look up how to use FontAwesome Icon as not come across that so far.

If you don't add code, time-consuming to check. (I will need setup a trial site, insert code & test code)

Aha. Code added now

1 hour ago, IvanOB said:

Aha. Code added now

Incorrect

London2019.

sorry fixed now

Hi Tuanphan my above email may give the wrong message as what I meant was that i had corrected the incorrect password so London2019 now works. I still need help with customising the generic social link icon.

thanks

3 minutes ago, IvanOB said:

Hi Tuanphan my above email may give the wrong message as what I meant was that i had corrected the incorrect password so London2019 now works. I still need help with customising the generic social link icon.

thanks

 

Which icon? email, instagram,...?

If all, you can search icons here, then share me url to there, I will give code to change.

https://fontawesome.com/v4.7.0/icons/

If you want to use your image, share image urls, I will give code to change

wanted one for Alamy but fontawesome doesn't have it as one of their icons. Would you be able to show me so i know how to do either way for future:

1) how to insert a fontawesome icon using for example the flickr one (just so i know how to do it for next time) https://fontawesome.com/v4.7.0/icon/flickr

2) how to do using this created image https://static1.squarespace.com/static/5df7b9c2c15c2c1fc90f169e/5e493f3287b2ad50b4671632/5e4945ac96cdbe0b668d97c0/1581860294931/Alamy+logo_v1.0.png?format=500w

thanks

Add to Home > Design > custom CSS

.sqs-svg-icon--wrapper.url div {
    visibility: hidden;
}
.sqs-svg-icon--wrapper.url {
    background-image: url(https://images.squarespace-cdn.com/content/5df7b9c2c15c2c1fc90f169e/1581860268227-OGUGWE97VEKFYWUZQKVB/Alamy+logo_v1.0.png?content-type=image%2Fpng);
    background-size: cover;
	background-repeat: no-repeat;
}

Facebook: .sqs-svg-icon--wrapper.facebook-unauth

Instagram: .sqs-svg-icon--wrapper.instagram-unauth

Email: .sqs-svg-icon--wrapper.email

Thanks Tuanphan, that works perfectly

I have this working in diff areas on the site (social link blocks, footer, nav bar), but not yet in the mobile menu. how do you target the mobile menu? @tuanphan thank you for all your help 🙂

On 5/21/2020 at 10:21 PM, maldrich said:

I have this working in diff areas on the site (social link blocks, footer, nav bar), but not yet in the mobile menu. how do you target the mobile menu? @tuanphan thank you for all your help 🙂

Each template has different cclass name for mobile menu. Can you share link to your site?

Hi Tuanphan,

I have a footer navigation social icons, the last one I have is for a site that SquareSpace dosen't have an icon for. I've created the icon i want to use, but not sure where can I uploaded to link it to the code supplied above for Ivan.

I want to change the link for this image

this is my address link under-construction: https://coyote-scarlet-6z7t.squarespace.com/config/pages

if you require the password could I email you privately?

Thank you!

On 12/1/2020 at 7:46 PM, Gracy said:

Hi Tuanphan,

I have a footer navigation social icons, the last one I have is for a site that SquareSpace dosen't have an icon for. I've created the icon i want to use, but not sure where can I uploaded to link it to the code supplied above for Ivan.

I want to change the link for this image

this is my address link under-construction: https://coyote-scarlet-6z7t.squarespace.com/config/pages

if you require the password could I email you privately?

Thank you!

Your site is private. Please setup password & share url again

Hi! Thank you for replying

Password: Gracy8

url: https://coyote-scarlet-6z7t.squarespace.com/

All good I worked it out!