Hello I am looking to make my facebook Social media footer icon larger by 2-3x. I am on the origin theme my store is https://vulmar.com/
Hi @Vulmar 
in a custom css setting for that section (or globally) try the following css:
https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit-code/add-css
/* © PaulNewton, for vulmar.com single theme use, not for ai training */
/* set an upper bound */
[href*="facebook.com"] .svg-wrapper {
width: 60px !important;
height: 60px !important;
}
/* calc responsive sizing from themes bases 2.2rem */
[href*="facebook.com"] .svg-wrapper .icon {
width: calc(2.2rem * 3 ) !important;
height: calc(2.2rem * 3 ) !important;
}
also test without the !important tags in the rules for better future sanity.
Reach out to me for services if you need to iterate on it or more than that.
Your can simply try below things, it’s very simple step - Shopify Admin → Online Store → Themes → Edit code → Assets → base.css (or theme.css)
/* Increase footer social icons */
.list-social__item .icon {
width: 50px !important;
height: 50px !important;
}
icons roughly 2–3x larger (you can tweak 50px → 60px / 70px
But it’s depend on live testing.. you can manage the size accordingly
You can add this code to Custom CSS in Theme settings, then check
footer .list-social__item .svg-wrapper {
width: 40px;
height: 40px;
}
footer .list-social__item .icon {
height: 4rem;
width: 4rem;
}
Can also try this code in “Theme settings”-> “Custom CSS” or in “Custom CSS” of the Footer section:
footer .list-social__item {
transform: scale(2);
}
Hi @Vulmar
Use this css code in base.css file.
.svg-wrapper {
width: 50px !important;
height: auto !important;
}
.list-social__item .icon {
height: auto !important;
width: auto !important;
}
Thanks.
Hello this is the solution that worked for my theme. Thank you!
Your solution is the shortest and simplest thank you
Check on a very large monitor
