How can I make social media icons bigger?

Solved
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)

Accepted Solutions
KetanKumar
Shopify Partner
36500 3621 11763

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 62 (62)
diego_ezfy
Shopify Partner
2851 543 782

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
2851 543 782

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. 

KetanKumar
Shopify Partner
36500 3621 11763

Hello, @KatesShop 

Thanks for the store URL.

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

.social-icons li .icon {
font-size: 30px; /* change font size as you like */
}

 

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

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
36500 3621 11763

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
36500 3621 11763

@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
36500 3621 11763

@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
36500 3621 11763

@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
36500 3621 11763

@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
36500 3621 11763

@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
New Member
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
36500 3621 11763

@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
New Member
2 0 2

Thank you for your help 🙂 

https://fjukabait.com/

password: drilde