How to make social icon in footer larger?
-
I need to edit the size of a specific social icon in my site’s footer. No matter how large the icon size that I upload is, it always presents as much smaller on the site than the other icons. How do I make the third icon large enough to be seen?
-
To increase the size of that specific icon, you should apply a targeted CSS rule because WordPress footers often have a “max-width” or “max-height” constraint that automatically shrinks images to keep them uniform. Since the icon appears smaller despite the high-resolution file you uploaded, you can override this behavior by going to Appearance > Customize > Additional CSS and adding a rule like .wp-block-social-links li:nth-child(3) img { width: 40px !important; height: auto !important; }, which specifically targets the third item in your social list. If you are using the Block Editor, you can also select that specific Social Icon block and check the “Advanced” tab in the right-hand sidebar to add a custom CSS class, allowing you to control its scale independently of the others without affecting the layout of the rest of your footer. This approach bypasses the theme’s default scaling and ensures the icon remains legible and aligned with its neighbors.
-
Thank you for your response James! Unfortunately, the social links section isn’t a WP block, it’s part of the site settings. Do you know what the CSS rule would be in this case? Thank you.
-
Since the social icons are generated by your theme’s settings or a specific menu location rather than a block, they are likely rendered as a standard HTML list, which allows us to target the third item using the nth-of-type selector. You can try a generic rule that targets the menu list items, such as .social-navigation li:nth-of-type(3) img { width: 40px !important; height: auto !important; }, but you may need to replace .social-navigation with the specific class name your theme uses, such as .menu-social, .jetpack-social-navigation, or .footer-menu. To find this exact name, right-click on one of the icons, select “Inspect,” and look for the class name of the container (<ul> or <div>) wrapping the icons; once you have that class, swapping it into the code above will allow you to force that specific third image to resize independently of the global theme settings.
-
-
I am very glad to hear that the targeted CSS rule worked and you were able to get that social icon sized exactly how you wanted it! Since you are working with custom styles in your footer, it is a good idea to occasionally check your site on a mobile device to ensure the larger icon doesn’t overlap with other elements or push the menu out of alignment on smaller screens. If you ever decide to add more icons or change their order in the future, just remember that the nth-of-type(3) part of the code is tied specifically to its position in the list, so you might need to update that number if the layout changes. It was a pleasure helping you get your footer looking professional and polished.
WordPress.com Forums 