Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

creating custom social icon image


IvanOB

Question

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.

Link to comment

17 answers to this question

Recommended Posts

  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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)

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

 

Link to comment
  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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!

Screenshot 2020-12-01 at 13.41.38.png

spotlight_Icon-01.png

Link to comment
  • 0
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!

Screenshot 2020-12-01 at 13.41.38.png

spotlight_Icon-01.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...