Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.
/* START OF Change the size of the Social Icons */
/* Header Social Icons */
.navbar-inner .social-block {
font-size: 2em;
}
/* Footer Social Icons */
.colophon .social-block {
font-size: 2em;
}
/* Sidebar Social Icons */
.tc-sidebar .social-block {
font-size: 1.5em;
}
/* Credit: @chappie */
/* END OF Change the size of the Social Icons */
1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then ‘2em’ is 24 pt. The ’em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
(Source: w3schools.com)
7 thoughts on “Change the size of the Social Icons”
I am trying to increase the size of the social media icons and the code doesn’t work on the add “Additional CSS”. I know this code is from 2013 but wanted to see if there is an updated code to try?
Hi Dave — I know you wrote this article on ‘Changing the Size of Social Icons’ for WP a while back.
I am trying to figure out where/how (via Admin Dashboard ‘Editor’, PHP, etc.) to change the social icon
sizes JUST ON MOBILE RESPONSIVE! Web is a good size currently. Thx! – Mark in Vancouver, Canada
mgm@socialmotion.media
Hello Mark, Dave has been notified about your request but we had to remove your email address for privacy reasons.
Cheers!
Hi! I love this Theme and I am trying to build my website with it. I am really interested in the same as chappie, to get of the “Social Links” title and just leave the icons there at the sidebar.
I would love some help. Thanks!
Hi Maria,
You can add the following code in your functions.php :
add_filter( 'tc_social_in_sidebar' , 'remove_social_title' );
function remove_social_title() {
ob_start();
?>
Cheers
How would you suggest removing the responsive CSS from the social icons or add these classes for my custom icon?
Thank you, Dave. I’ll throw in the third member of the Social Icon trilogy:
/* enlarge sidebar Social Icons */ .tc-sidebar .social-block { font-size: 1.5em; }If it’s on-topic, I would like to get rid of the “Social Links” title and icon at the top of my right sidebar (having selected this option in the Customiz’it menu), leaving just the (self-explanatory) icons — and hopefully grab back some screen real estate in the process. Could you please point me in the right direction?