Trying to make social media icon bigger on spotlight theme

[tarker12]

I cant figure out how to make social media icons bigger on spotlight theme.

Any help would be great

https://gadgets4joy.com

Thanks!

[BSSCommerce-HDL · Accepted solution]

Hi @tarker12, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Add this code before </head> tag:

<style>
.list-social__item .icon {
    scale: 2;
}
</style>

 Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[tarker12]

Thank you thank you!!

[BSSCommerce-HDL]

@tarker12, No problem. Glad to help you 😍

[Made4uo-Ribe]

Hi @tarker12 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

li.list-social__item .svg-wrapper {
    width: 3rem;
    height: 3rem;
}

a.link.list-social__link {
    padding-top: 0;
    padding-left: 0;
                    }

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[BSS-TekLabs]

- Here is the solution for you @tarker12 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.list-social__link span.svg-wrapper {
    width: 40px ! IMPORTANT;
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Sam416]

Hi @tarker12 

Using CSS, you can target the SVG icon within the ul and li elements. Here’s how you can do it:

ul.list-social li.list-social__item .icon.icon-facebook {
  width: 40px; /* Adjust the width as needed */
  height: 40px; /* Adjust the height as needed */
}

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi @tarker12  Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
 .icon.icon-facebook{
    scale: 2.5 !important;
    margin-top: 16px !important;
}
</style>

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly