Re: How can I make social media icons bigger?

Solved

How can I make social media icons bigger?

KatesShop
Excursionist
14 0 4

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

Not a programmer but have half a brain so can hopefully figure most stuff out.
Accepted Solution (1)
KetanKumar
Shopify Partner
37142 3648 12063

This is an accepted solution.

@KatesShop 

Thanks for update 

yes can you please add this code also

ul.social-icons {
margin-top: 15px;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 78 (78)

diego_ezfy
Shopify Partner
2969 571 915

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
Excursionist
14 0 4

Hi there

https://katenewingtoninteriors.co.uk/

or

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

I'd be delighted if you can help.

Not a programmer but have half a brain so can hopefully figure most stuff out.
diego_ezfy
Shopify Partner
2969 571 915

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
Excursionist
14 0 4

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?

Not a programmer but have half a brain so can hopefully figure most stuff out.
KetanKumar
Shopify Partner
37142 3648 12063

This is an accepted solution.

@KatesShop 

Thanks for update 

yes can you please add this code also

ul.social-icons {
margin-top: 15px;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KatesShop
Excursionist
14 0 4

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

Not a programmer but have half a brain so can hopefully figure most stuff out.
KetanKumar
Shopify Partner
37142 3648 12063

@KatesShop 

Thanks for update and your support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Olivier7
Excursionist
27 0 5

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
Shopify Partner
37142 3648 12063

@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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Olivier7
Excursionist
27 0 5

@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?

Screenshot 2020-12-31 at 05.16.57.png

KetanKumar
Shopify Partner
37142 3648 12063

@Olivier7 

Thanks for it 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Olivier7
Excursionist
27 0 5

Sure, the code has been put back now.

Thanks

KetanKumar
Shopify Partner
37142 3648 12063

@Olivier7 

Thanks 

can you please add this code also,

.social-media a {
    margin-right: 30px !important;
} 
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Olivier7
Excursionist
27 0 5

@KetanKumar Thank You once again. It work just fine

KetanKumar
Shopify Partner
37142 3648 12063

@Olivier7 

Thanks for your feedback and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
beckyben
Visitor
2 0 2

Hi There. 

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

Ben

 

KetanKumar
Shopify Partner
37142 3648 12063

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
beckyben
Visitor
2 0 2

Thank you for your help 🙂 

https://fjukabait.com/

password: drilde

 

AndreaBergs
Tourist
8 0 1

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
Shopify Partner
37142 3648 12063

@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 ; }

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Rox1
Tourist
7 0 3

Thanks it works 🙂

Rox1
Tourist
7 0 3

Hi 


I have a problem with the code, the Instagram icon does not respond to the code.Capture d’écran, le 2024-06-06 à 14.03.59.png

 

KetanKumar
Shopify Partner
37142 3648 12063

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Rox1
Tourist
7 0 3

Hi @KetanKumar 

 

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

 

Thanks 

 

KetanKumar
Shopify Partner
37142 3648 12063

@Rox1 

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

KetanKumar_0-1718050078906.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Rox1
Tourist
7 0 3

Hi 

 

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

 

Thanks

KetanKumar
Shopify Partner
37142 3648 12063

@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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
salar15
Tourist
9 0 6

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
Shopify Partner
37142 3648 12063

@salar15 

sorry for that issue please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
salar15
Tourist
9 0 6

Thank you for your help.

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

KetanKumar
Shopify Partner
37142 3648 12063

@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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
salar15
Tourist
9 0 6

it works perfectly!

thanks a lot for your help

KetanKumar
Shopify Partner
37142 3648 12063

@salar15 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
salar15
Tourist
9 0 6

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

IMG_20211113_180940.jpg

Screenshot_20211113_180953_com.android.chrome.jpg

KetanKumar
Shopify Partner
37142 3648 12063

@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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
salar15
Tourist
9 0 6

it works fine.

thank you so much

amazezones
Explorer
82 0 13

Hi there 

 

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

amazezones
Explorer
82 0 13

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

KetanKumar
Shopify Partner
37142 3648 12063

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
amazezones
Explorer
82 0 13
KetanKumar
Shopify Partner
37142 3648 12063

@amazezones 

thanks for ulr but sorry your store password protect 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
amazezones
Explorer
82 0 13

I forgot the pass sorry for that pass: bahshe

KetanKumar
Shopify Partner
37142 3648 12063

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KFORREST
Excursionist
27 1 6
It's not live yet but here it is....

https://creativedesignsbykari.myshopify.com/
KetanKumar
Shopify Partner
37142 3648 12063

@KFORREST 

thanks but your store password protect 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KFORREST
Excursionist
27 1 6
It is not live yet. Can I email you?--

Kari Forrest
KetanKumar
Shopify Partner
37142 3648 12063

yes, please 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KFORREST
Excursionist
27 1 6

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

https://creativedesignsbykari.myshopify.com/

KFORREST
Excursionist
27 1 6

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