How to turn your social media icons into flags using the Simple Social Icons plugin

How to turn your social media icons into flags using the Simple Social Icons plugin

Want to dress up your social media icons to be a little different than the standard square, rounded, or circle icons?! How about we turn them into these cute little flag icons?!

Let’s get started…

First, you’ll need to have the Simple Social Icons plugin installed and activated.

Secondly, you’ll want to download this image and upload it to your images folder of your theme files. Not sure how to do that? You’ll first want to login via FTP and navigate to wp-content/themes/yourtheme/images and upload the image there.  If you’re not sure how to login to your site via FTP, you can alternatively upload that image to your Media Library and grab the URL once it’s uploaded.

Once that is done, let’s add this tiny snippet of code to your style.css file:

/* Simple Social Icons
——————————————— */

.simple-social-icons ul li {
border: none !important;
outline: none !important;
}
.simple-social-icons ul li a {
background: url(images/icon-social.png) bottom center no-repeat;
padding-bottom: 20px !important;
}

Note: If you uploaded the image from above to your Media Library, replace images/social.png with your file URL.

And the last step here is to actually set up your Social Media Icons widget! You’ll simply drag and drop a Simple Social Icons widget to wherever you’d like to place your new icons under the Appearance>Widgets area in your WordPress dashboard. Here is a snapshot of how to configure them within your widget.

How to turn your social media icons into flags using the Simple Social Icons plugin

Now you have cute little flag icons!

How to turn your social media icons into flags using the Simple Social Icons plugin

These cute little flag icons are feature in The Blossom Theme! Check it out here. 

border

Spread the word!

how to turn your social media icons into flags

Similar Posts

31 Comments

  1. Great tutorial! Should this work on all the themes? I have the tidy theme and followed your steps exactly, but my icons are not showing up as a flag. Could you provide me with some advice to fix this.
    Thanks so much!

    1. Oops! It looks like you uploaded the .zip version of the file. You’ll want to unzip the file and then upload the social.png file! It should work then!

      1. Thanks for the quick response, I tried uploading the .png file to my media library yesterday and today and it keeps showing an error message, “Error._social.pngAn error occurred in the upload. Please try again later.” Any idea why this might be happening?

  2. Hi,
    I must have done something wrong, because they are still little boxes. I uploaded the .png file, added the snippet of code to the style.css file and pfffft. 🙂

  3. I can’t get this to work. I unzipped the file, uploaded the png to my images folder via FTP. Then I added the code to the simple social icons area in the stylesheet.

    /* Simple Social Icons
    ——————————————— */

    .simple-social-icons ul li {
    border: none !important;
    outline: none !important;
    }
    .simple-social-icons ul li a {
    background: url(images/icon-social.png) bottom center no-repeat;
    padding-bottom: 20px !important;
    }

    It’s still not showing up. Did I miss a step?

    1. Nevermind, I didn’t change the background colour so I couldn’t see the change. Now I just have to fix the spacing between the icons and it’s good to go!

  4. I have tried all of the above suggestions, but my icons are still showing as little rectangles rather than flags… Have I missed something?

    1. Try changing the actual file name from social.png to something like icon-social.png. That should fix it for you!

  5. I’m having a hard time finding the best place to put this code.

    This is the only place I can find in my CSS style sheet with the social icons

    }

    .nav-secondary .genesis-nav-menu .simple-social-icons ul li a,
    .nav-secondary .genesis-nav-menu .simple-social-icons ul li a:hover {
    font-size: 11px;
    }

    .genesis-nav-menu .simple-social-icons ul li,
    .genesis-nav-menu .simple-social-icons ul li:hover {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    }

    Where exactly should the code you provided go within this?

    1. HI Anna! You’ll add the piece of code mentioned in the above tutorial via your FTP host. You don’t add this to stylesheet. 🙂 If you want to email me directly, you can use the contact form on the site and we can help you out!

  6. Hi, Thanks for the great tutorial.

    I successfully created my simple social icons into these beautiful flag styles but my icons are all appearing in one vertical column and not all in a horizontal row like yours.

    Any tips on how to fix this?

    Thanks! xx

    1. Hi Samantha,

      Try changing the file name to something other than social.png. Then redo your steps. That should fix it!

      1. I noticed something about this issue on the simple social media icons about font issues but i have no other social media installed

        1. also says not tested with my version of wordpress so wondering if that has anything to do with it since I did try another program but wanted to use the plug ins you recommended

  7. Does this code still work?

    /* Simple Social Icons
    ——————————————— */

    .simple-social-icons ul li {
    border: none !important;
    outline: none !important;
    }
    .simple-social-icons ul li a {
    background: url(images/icon-social.png) bottom center no-repeat;
    padding-bottom: 20px !important;
    }

          1. ok and the image you have their for us to upload is part of a triangle thats correct? Just want to make sure its good to go 🙂

            Thanks!

  8. Hi, it appears that i am having a similar problem with my icon showing up as a rectangle. I changed the file name to icon-social.png, but it appears i am getting the same result. Any other solution to this problem? My site is still under construction, but i would love to use this feature.

    1. It looks like the link you have there for the image path isn’t working. Did you paste the full link into the css file that you grabbed from your media library?

Leave a Reply

Your email address will not be published. Required fields are marked *