Add Metro or Flat Social Media Icons to Your Website

simple social icons add colors


Would you like to create metro or flat social media follow icons in the official colors for your WordPress website or blog? Well, you can!

You can use the Simple Social Icons plugin by Natan Rice and StudioPress for this. While there are many plugins and icon sets to add social media follow icons, this one is easy to use on any website; it has fifteen different social media icons, and uses a font icon set so your icons always look crisp at any screen density. The options available in the plugin allow you to easily set colors, size, and border radius. So let’s get started.

Install the Simple Social Icons Plugin

From your WordPress Dashboard, click Plugins > Add new. Then search for Simple Social Icons. Click Install Now and then Activate.

Add the Widget to Your Website Sidebar

  1. Now click on Appearance > Widgets.
  2. Find the Simple Social Icons widget and drag it to your Sidebar widget Area.
  3. The widget will open, so you can add your links. Go to all your social media sites and copy the urls from the top of the browser and paste into each URI field.
  4. Then for the options at the top of the widget, choose the following:
simple social icons options
  • Icon Size – you can leave it at 36px, or for  small icons, try 24px, and for larger, try 48px.
  • Icon Border Radius – try 8px for rounder corners on 36px icons or 10px on 48px icons; using 0 will give square corners and for circle icons, use a border radius of half the icon size.
  • Leave the Icon Font Color and the Icon Font Hover Color at #ffffff (white).
  • The Background Color (#999999 – medium gray) and  Background Hover Color (#666666 – darker gray) can be left at the defaults for now.

You can experiment with any of these settings.

Add New Icon Background Color Styles

Next you will need to add some CSS to change the colors. If you edit your own style.css, you can add the CSS below to the end of your file, but before any media query sections. You can also use a Custom CSS plugin.

To get the color hex codes for each icon, we can use the color chart from Simple Icons by Dan Leech, as featured on Smashing Magazine. In the comments, he tells how he created the color list.

You can then add the new background-color to each icon link. The !important is needed to make sure your colors, rather than the plugin colors, are used in your sidebar. Copy and paste this code into your style.css or your Custom CSS plugin.

/* Simple Social Icons
--------------------------------------------- */
.simple-social-icons .social-dribbble a {
	background-color: #ea4c89 !important;
}
.simple-social-icons .social-email a {
	background-color: #999999 !important; /* default */
}
.simple-social-icons .social-facebook a {
	background-color: #3b5998 !important;
}
.simple-social-icons .social-flickr a {
	background-color: #0063db !important;
}
.simple-social-icons .social-github a {
	background-color: #4183c4 !important;
}
/* Google Plus is no longer used */
.simple-social-icons .social-instagram a {
	background-color: #3f729b !important;
}
.simple-social-icons .social-linkedin a {
	background-color: #007fb1 !important;
}
.simple-social-icons .social-pinterest a {
	background-color: #cb2027 !important;
}
.simple-social-icons .social-rss a {
	background-color: #ff8300 !important;
}
.simple-social-icons .social-stumbleupon a {
	background-color: #eb4924 !important;
}
.simple-social-icons .social-tumblr a {
	background-color: #2c4762 !important;
}
.simple-social-icons .social-twitter a {
	background-color: #00aced !important;
}
.simple-social-icons .social-vimeo a {
	background-color: #44bbff !important;
}
.simple-social-icons .social-youtube a {
	background-color: #cd332d !important;
}

And that’s all there is to it!

More Examples of Flat Social Media Icons

simple social 48px 0px


This set of social media icons uses an Icon Size of 48px and an Icon Border Radius of 0px to make square icons.

simple social 64px 32px


This set of social media icons uses an Icon Size of 64px and an Icon Border Radius of 32px for large circles.

simple social 128px 64px

The set of social media icons below uses an Icon Size of 128px and an Icon Border Radius of 64px for huge circles.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

8 responses to “Add Metro or Flat Social Media Icons to Your Website”

  1. Kris says:

    Wonderful! Thanks for sharing :)

  2. Carolyn K says:

    Thank you, I have been trying to find this. You made it super simple.

  3. Exnius says:

    Awesome, Marcy. Thank you very much. I’m using your trick

    :D

    Bye

  4. Daniel says:

    I read and re-read and see no mention of how to obtain the icon images.

    • Marcy Diaz says:

      The second sentence says, “You can use the Simple Social Icons plugin by Natan Rice and StudioPress for this.”
      The icons are in the plugin.
      Then you need to add styles to your theme to make the icons look like those in the post.

Leave a Reply

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