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. Restored316 says:

      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?

        1. Restored316 says:

          Just sent you an email to help get you all fixed up!

    1. Restored316 says:

      Hi Kristi,

      You should be able to double click the zip file and it will open the file.

  2. Wow, great. I love it! Thank you so much for the help! Sadly the don’t have a bloglovin one.. But still loving it. Thank you so much for the help!

  3. Sally Lynn says:

    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. 🙂

    1. Restored316 says:

      Try renaming the file to icon-social.png. That should work for you then!

  4. 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!

      1. Restored316 says:

        Oh good! Glad you got it! 😉

  5. 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. Restored316 says:

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

      1. Thank you! That worked perfectly 🙂

  6. 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. Lauren Dierschke says:

      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!

  7. 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. Restored316 says:

      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

  8. 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. Lauren Dierschke says:

      Hey Kristi! Yes! This code should still work. 🙂

      1. Will this work for the darling theme?

        1. Restored316 says:

          Yes! This will work with any of our themes!

          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!

          2. Restored316 says:

            That is correct!

  9. 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. Restored316 says:

      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 *