Trying to make social media icon bigger on spotlight theme

Shopify Discussion
1

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

Any help would be great

https://gadgets4joy.com

Thanks!

4 Likes
2

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 tag:

Here is result:

BSSCommerceHDL_0-1727355553517.png
BSSCommerceHDL_0-1727355553517.png499×705 24.2 KB

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 :heart_eyes:

1 Like
3

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:

Made4uoRibe_0-1727355958010.png
Made4uoRibe_0-1727355958010.png309×177 4.04 KB

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

4
  • 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 and press ‘Save’ to save it
  • Here is the result you will achieve:

BSSTekLabs_0-1727355967019.png
BSSTekLabs_0-1727355967019.png366×382 10.1 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
5

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 */
}
6

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

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

7

Thank you thank you!!

1 Like
8

@tarker12 , No problem. Glad to help you :heart_eyes: