How can I make social media icons bigger?

Solved
KatesShop
Excursionist
14 0 3

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
24918 2497 9034

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 30 (30)
diego_ezfy
Shopify Partner
2300 413 541

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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
KatesShop
Excursionist
14 0 3

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
2300 413 541

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. 

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
KetanKumar
Shopify Partner
24918 2497 9034

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 3

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
24918 2497 9034

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

KatesShop
Excursionist
14 0 3

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
24918 2497 9034

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