How to change mail/link icon on social links?

Site URL: https://heptagon-brass-6xej.squarespace.com/

Hi guys!

I have not found an answer anywhere how to change the standard mail icon and also add my own icons instead of link icon.
How do I change this?  Does anyone have a code?

https://heptagon-brass-6xej.squarespace.com/
pw - hello

3 hours ago, Venera said:

Site URL: https://heptagon-brass-6xej.squarespace.com/

Hi guys!

I have not found an answer anywhere how to change the standard mail icon and also add my own icons instead of link icon.
How do I change this?  Does anyone have a code?

https://heptagon-brass-6xej.squarespace.com/
pw - hello

Try adding to Home > Design > Custom Css

.sqs-svg-icon--wrapper[href*='foundation'] svg{
  visibility: hidden
}

.sqs-svg-icon--wrapper[href*='foundation']:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-image: url('https://api.iconify.design/akar-icons/tiktok-fill.svg?color=white');
  background-repeat: no-repeat;
  background-position:center center;
  background-size: contain;
}

Change the link to your image of social icon

Let me know how it works on your site

18 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

.sqs-svg-icon--wrapper[href*='foundation'] svg{
  visibility: hidden
}

.sqs-svg-icon--wrapper[href*='foundation']:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-image: url('https://api.iconify.design/akar-icons/tiktok-fill.svg?color=white');
  background-repeat: no-repeat;
  background-position:center center;
  background-size: contain;
}

Change the link to your image of social icon

Let me know how it works on your site

Thank you! It works! How to do the same with mail icon -  replace one envelope with another?

15 minutes ago, Venera said:

Thank you! It works! How to do the same with mail icon -  replace one envelope with another?

I just replaced the word with "mail" and it worked! Thank you very much!

Now the basics logo looks very small in a square space. How can I enlarge the logo and not fit it into a square, but fit it into a rectangle so that it looks a little bigger?

1 hour ago, Venera said:

Now the basics logo looks very small in a square space. How can I enlarge the logo and not fit it into a square, but fit it into a rectangle so that it looks a little bigger?

Try this code

.sqs-svg-icon--wrapper {
    overflow: visible;
}
.sqs-svg-icon--wrapper[href*='foundation']:after {
    transform: scale(1.5);
}

9 minutes ago, tuanphan said:

Try this code

.sqs-svg-icon--wrapper {
    overflow: visible;
}
.sqs-svg-icon--wrapper[href*='foundation']:after {
    transform: scale(1.5);
}

 

Perfect! Thank you so much!