How to enlarge social media icon size on Stiletto

[elleCtaylor]

Hi,

I am trying to edit the code to enlarge the size of the linked social media icons on our website -https://rankinsjewellers.co.uk/

We are using the Stiletto template and I seem unable to edit the size of the icons on our homepage. I have reached out to support and it seems like the Stiletto theme doesn’t provide a direct option to modify the header through the theme editor.

Please can I ask for some suggestions/help?

Many thanks.

[Guleria]

Hello @elleCtaylor ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your custom.css file and paste the following code at the bottom:

 .header .social-icons li svg {
    width: 26px !important;
    height: 26px !important; 
}

Regards
Guleria

[elleCtaylor]

Hi Guleria,

I have given this a go but the icon size has remained the same.

Are there any further ideas on how I can solve this issue?

Thanks,

Elle

[suyash1]

@elleCtaylor - please add this css to the very end of your custom.css file and check

.header .social-icons li svg {width: 28px; height: 28px;}

[elleCtaylor]

Still no luck sadly!

[Guleria]

Use the code in same file but before this line in same file 

@media (max-width: 722px){

[Made4uo-Ribe]

Hi @elleCtaylor 

Try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes"
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
.header .social-icons li, .header .social-icons li .icon, .header .social-icons li svg  {
    width: 30px;
    height: 30px;
}
</style>

• And Save. 
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Dan-From-Ryviu]

Hi @elleCtaylor 

You can try to add this code and check again

.header .social-icons li, 
.header .social-icons li .icon, 
.header .social-icons li svg {
    width: 26px;
    height: 26px;
}

Change 26px in the code with your values that fit your request.

[Rahul_dhiman]

Hello @elleCtaylor 
Go to online store ----> themes ----> actions ----> edit code ----> theme.css
add this code at the end of the file and save.

.footer .social-icons .icon {
width: 30px !important;
height: 30px !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks