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

creating custom social icon image

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.

Share this post


Link to post

13 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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
1 hour ago, IvanOB said:

Aha. Code added now

Incorrect

London2019.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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

 

Share this post


Link to post
  • 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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 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

 

Share this post


Link to post
  • 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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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 🙂

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...