Jump to content

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

Go to solution Solved by colin.irwin,

Recommended Posts

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!

Edited by Guest
Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

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

Edited by silvabokis

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment
  • 1 year later...
  • 4 years later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 4 months later...
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?

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 2 years later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.