How can I make social media icons bigger?

Store Design
1

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

2

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

3

Hi there

https://katenewingtoninteriors.co.uk/

or

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

I’d be delighted if you can help.

1 Like
4

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 (press CTRL + F or command + F on Mac)
  3. paste this code right above the 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.

5

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

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?

7

@KatesShop

Thanks for update

yes can you please add this code also

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

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

1 Like
9

@KatesShop

Thanks for update and your support.

1 Like
10

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?

1 Like
11

@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;
}
1 Like
12

@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
Screenshot 2020-12-31 at 05.16.57.png322×298 3.94 KB

13

@Olivier7

Thanks for it

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

1 Like
14

Sure, the code has been put back now.

Thanks

15

@Olivier7

Thanks

can you please add this code also,

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

@KetanKumar Thank You once again. It work just fine

1 Like
17

@Olivier7

Thanks for your feedback and support.

1 Like
18

Hi There.

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

Ben

2 Likes
19

@beckyben

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

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

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

20

Thank you for your help :slightly_smiling_face:

https://fjukabait.com/

password: drilde