How can I make social media icons bigger?

[KatesShop]

Hi there

I am using the Supply theme and the social media icons/links appear right at the very bottom of the page, underneath the footer, and they are really tiny so will easily be missed.

How do I make these maybe twice the size?  I assume I'll have to change some code?

Thank so much

[diego_ezfy]

Hello,

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one) so we can help you.

Kind regards,
Diego

[KatesShop]

Hi there

https://katenewingtoninteriors.co.uk/

or

https://kate-newington-interiors.myshopify.com/

I'd be delighted if you can help.

[diego_ezfy]

Hey Kate, 

Kindly try the following:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

.social-icons li .icon{
    font-size: 28px !9mportant;
    margin-top: 10px;
}

You can play around with those values. 
28px = size of the icons. If you want it bigger, you can try something like 35px or any other value.
10px = spacing on top of the icons. 

Let me know whether it helps you. 

[KatesShop]

dantepw - This doesn't seem to be working, even if I alter the size?

KetanKumar - This works perfectly to change the icon size but the icons then crash in to the line above. How would I rectify that?

[KetanKumar · Accepted solution]

@KatesShop 

Thanks for update 

yes can you please add this code also

ul.social-icons {
margin-top: 15px;
}

[KatesShop]

Perfect!  That works brilliantly!  And so easy for me to do.  Thank you.  :0)

[KetanKumar]

@KatesShop 

Thanks for update and your support.

[Olivier7]

Hey @KetanKumar,

I have the same request but with another theme: Shella.

I would like to make the social media icons bigger on mobile and desktop.

Here's my store: https:/fineforeal.myshopify.com

password: onbuild.77

Any way you can help me with that?

[KetanKumar]

@Olivier7 

Thanks or post 

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/typography.scss.css->paste below code at the bottom of the file.

.social-media .icon {
    width: 20px;
    min-width: 20px;
}
.social-media .icon-social-facebook {
    width: 10px;
    min-width: 10px;
}

[Olivier7]

@KetanKumar Thank you very much Sir, this worked like a charm.

Is there a way to put some space between the Facebook and the twitter Icon so that spacing stays even?

[KetanKumar]

@Olivier7 

Thanks for it 

can you please add code and let me know after i will give spacing code 

[Olivier7]

Sure, the code has been put back now.

Thanks

[KetanKumar]

@Olivier7 

Thanks 

can you please add this code also,

.social-media a {
    margin-right: 30px !important;
} 

[Olivier7]

@KetanKumar Thank You once again. It work just fine

[KetanKumar]

@Olivier7 

Thanks for your feedback and support.

[beckyben]

Hi There. 

Do you have the equivalent to work on the Flow theme please? Many thanks in advance.

Ben

[KetanKumar]

@beckyben 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊

Please share your site URL,
So I will check and provide a solution here.

[beckyben]

Thank you for your help 🙂 

https://fjukabait.com/

password: drilde

[AndreaBergs]

Hey there ! 🙂 I have the same problem and I tried every solution you have given on this thread but nothing worked.
Do you have any solution for the Icon theme? I have stylesheet.css.
The url to my website is www.wrinklesschminkles.is

[KetanKumar]

@AndreaBergs 

yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/stylesheet.css ->paste below code at the bottom of the file.

.share-icons--icon { width: 50px ; height: 50px ; }

[Rox1]

Thanks it works 🙂

[Rox1]

Hi 

I have a problem with the code, the Instagram icon does not respond to the code.

[KetanKumar]

@Rox1 

Thank you for reaching out and posting this question!
Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Rox1]

Hi @KetanKumar 

Thanks for your help my website is www.lonavity.ca

Thanks 

[KetanKumar]

@Rox1 

Thanks for url but i can't see any issue currently looking good 

[Rox1]

Hi 

I launched my new site, and it's not working https://www.lonavity.ca/ 

Thanks

[KetanKumar]

@Rox1 yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/stylesheet.css->paste below code at the bottom of the file.

svg.icon--instagram.social-icons--icon {
    width: 50px;
    height: 50px;
}

[salar15]

Hi,

I am trying to make the social medias bigger for the footer on Capital theme.

could you please help me to do it?

Thank you

[KetanKumar]

@salar15 

sorry for that issue please share store url

[salar15]

Thank you for your help.

here is the store url: https://www.classiccanvas.ie/

[KetanKumar]

@salar15 

thanks for url, can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme-index.min.css ->paste below code at the bottom of the file.

.main-footer-inner .social svg {
height: 35px ; width: 35px;
}

[salar15]

it works perfectly!

thanks a lot for your help

[KetanKumar]

@salar15 

its my pleasure to help us 

[salar15]

Hi, 

I still have a small problem with the add to cart button. I can make it the same size as the buy with PayPal button on desktop, but the size will be different on mobile devices.

Is there a way to fix this?

Thank you

 

 

[KetanKumar]

@salar15 

yes please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/custom.css ->paste below code at the bottom of the file.

.product-details .product-form .form-actions .button {
    min-width: 100% !important;
}

[salar15]

it works fine.

thank you so much

[amazezones]

Hi there 

I could not find file called typography.scss.css in Shella Theme. Could you please assist me

[amazezones]

I'm trying to increase social media font both in header and footer. 

[KetanKumar]

@amazezones 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[amazezones]

Here it is 

https://www.ohwantedstudio.com

[KetanKumar]

@amazezones 

thanks for ulr but sorry your store password protect 

[amazezones]

I forgot the pass sorry for that pass: bahshe

[KetanKumar]

@amazezones 

oh sorry for late can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme-d.css ->paste below code at the bottom of the file.

.footer__social-media .social-media .icon {
    width: 30px;
    min-width: 30px;
}
.footer__social-media .social-media .icon-social-facebook {
    width: 15px !important;
    min-width: 15px !important;
}

 @KFORREST 

sorry for that issue can you send store url

[KFORREST]

It's not live yet but here it is....

https://creativedesignsbykari.myshopify.com/

[KetanKumar]

@KFORREST 

thanks but your store password protect 

[KFORREST]

It is not live yet. Can I email you?--

Kari Forrest

[KetanKumar]

yes, please 

[KFORREST]

The store is live now but the issue still exists.  Thanks in advance for a solution. 

https://creativedesignsbykari.myshopify.com/

[KFORREST]

I tried this on the Supply theme and it didn't work.  Any new suggestions?