Need help? Check out our Support site, then


Change social media icon size in Navigation Bar? (Standard Theme)

  1. Is it possible to change the social media icon size in the navigation bar (Standard Theme)? If so, how?

    The blog I need help with is jeffdlawrence.com.

  2. There is not a built in option to change the size of the social icons in the Standard theme, but you can change them out manually with CSS.

    The first thing you'll need to do is find larger social icon images because the theme only comes with a set of small ones. Once you find them, upload them to your media library and copy the image URL for each one.

    Here is an example of the CSS you can use to change out the image for the RSS icon in the top navigation bar in the Standard theme:

    #social-networking .social-icons a[title="Subscribe via RSS"] img {
    display: none;
    }
    
    #social-networking .social-icons a[title="Subscribe via RSS"] {
    display: block;
    width: 64px;
    height: 64px;
    background: url(http://jeffdlawrence.files.wordpress.com/2012/03/mail.png) no-repeat;
    }

    Note that I used a mail envelope image I saw on your side as an placeholder image to illustrate how this works. You will want to change out the width, height, and url() values with the ones for your images.

    To find what the titles of the social icon links are, you can look at the page source for your site in any web browser. I checked the Standard theme and here is a list of all the link titles used for the social icons:

    • Twitter
    • Facebook
    • Google+
    • Pinterest
    • Vimeo
    • YouTube
    • Subscribe via RSS

    You should just add CSS blocks like the one in the example above for any of the ones you are currently using.

Topic Closed

This topic has been closed to new replies.

About this Topic