How do I change the size of the social media icons?

Hello Everyone,

Looking to find the CSS to enlarge the size of the social media icons in the footer area. I've tried multiple CSS but have not quite gotten the right one. I'm hoping to enlarge the icons while keeping them centered.

I'm using the Marquee template. Link is below and I'm grateful for any help. Thank you much!

someguysgetit.com

Cheers!

@ silvabokis - THANK YOU!!!

I was missing only the font-size property.

Thanks again! Cheers!

No problem mate

In Squarespace 7 you can change the size of Marquee social media icons within the footer content editing area. The sizes range from XS - XL and you can also rearrange the alignment from left, center and right.

I'm trying to change the size of my icons in Squarespace 7, and I need sizes larger than XL. The custom CSS code above is outdated. Is there a way to do this now?

19 hours ago, SurfaceImperfections said:

I'm trying to change the size of my icons in Squarespace 7, and I need sizes larger than XL. The custom CSS code above is outdated. Is there a way to do this now?

Can you share link to your site? I can take a look

On 5/22/2014 at 2:14 AM, colin.irwin said:

Add

.sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:before, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:link:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:link:before, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:visited:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:visited:before {

   /* The icon size */
   font-size: 40px;
   }

   .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:link, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:link, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:visited, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:visited {

   /* Space around icons */
   width: 40px;
   height: 40px;
   }

 

 

To your Custom CSS Editor

How in the world do you know the syntax for this? Its not intuitive at all. Is there a place where I can learn how to learn the syntax of CSS?

On 9/25/2020 at 7:27 PM, DukeoftheGrapes said:

How in the world do you know the syntax for this? Its not intuitive at all. Is there a place where I can learn how to learn the syntax of CSS?

Learn CSS at W3schools.com

Is there a way to make the social links in the footer larger in 7.1? I've got them set on XL in my design settings bu they're still not large enough

On 12/1/2022 at 6:17 AM, ellecree said:

Is there a way to make the social links in the footer larger in 7.1? I've got them set on XL in my design settings bu they're still not large enough

Possible. If you share site url, we can check easier

I'm trying to change the size of my social icons in Squarespace 7.1, and I need sizes larger than XL. Is there a way to do this? I'm referring to the icons after the services on our Home Page. Thanks!

https://beagle-cod-7bmw.squarespace.com/config/ I'm still on a trial mode.

10 hours ago, Dario88c said:

I'm trying to change the size of my social icons in Squarespace 7.1, and I need sizes larger than XL. Is there a way to do this?

Your site is private. Here is my boilerplate about giving us access to your site.

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Thank you Creedon. 

Password is now set up. Here is the link: https://beagle-cod-7bmw.squarespace.com/ and here's the password: 5p0rt51nv3st2024

Let me know if this works please. 

On 4/11/2024 at 2:01 AM, Dario88c said:

I'm trying to change the size of my social icons in Squarespace 7.1, and I need sizes larger than XL. Is there a way to do this?

Set the size in the Design tab to Small (the default SS uses when a Social Links block is created).

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  #siteWrapper {
  
    --social-links-size-custom : 64px;
    
    }
    
  .socialaccountlinks-v2-block .social-icons-size-small.social-icons-style-regular .sqs-svg-icon--wrapper {
  
    height : var( --social-links-size-custom );
    width : var( --social-links-size-custom );
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

Thank you Creedon.  It worked very well for us!