Family Time

Recently someone asked me where I got the code for my social media icons. I see a lot of blogs that use their icons wonderfully, yet there are a few bloggers struggling with how to set up their social media icons and how to make it look beautiful. Some sites you can’t find the icons because they are hard to read, too small, or too spread out. Worse yet some sites just don’t have any icons so readers are unable to connect to the blog and blogger.

Today I’m going to share with you how to choose your icons, where to find great icons, and how to add the icons to your blog.

How to choose the right icons for you.

Tip 1 – Keep in mind the style of your site. If you have a really clean and simple layout pick out clean simple icons. Icons that are hand drawn or “messy” will be distracting or look out of place. If you have a dark layout you want to make sure that your icons aren’t too dark and blend into the background and get lost. But you don’t want to pick out icons that are too light and stick out like they don’t belong there.Try to match the feel of your site. Try out a few different sets of icons.

Tip 2 – Find a set that has all the icons you need. Consistency is key here. If you choose all your icons from the same set you are going to make it easier for your readers. The group of icons will catch their eye and they will easily be able to identify this is where they can connect with you and your website! If you have one icon that isn’t from the set it will look like it was an after thought and ruin the feel of the rest of the icons.

Tip 3 – If you make money on your blog make sure that you choose an icon set that is okay for commercial sites. Usually the designer will mention this on their site or have it with the file.

Where to Find Amazing Icon Sets

I use a few different resources to find icons for me and my clients. One of the first places I go is Iconfinder.com, this is a searchable bank of icons where designers can get together and share their artwork! There are other icon search engines, but so far I like this one the best. They have a slide bar so you can select the sizes you want to look at. They also have a drop down menu for showing only commercial friendly icons. Also you can see what the icons would look like on a light background or a dark or if you have a patterned background or bright color you can use the grey button to make sure they have a transparent background.

Another tool I use to find icons is Google’s Image Search. Search terms you can use are “social media icons” or “social icons”.  You will be able to find the sets because most designers use an image of all the icons together.  When you see an image like that of icons that you like. Click on it. You should be then taken to the image in a window. Click out of the box and you will see the designers post about the icons. Or you may be taken to a design site that is talking about that specific set of icons or has a list of great icons. Have fun searching, designers are constantly adding more and better icons so I’m sure you will find something amazing!

How to Add Icons to your Site

Now that you have found a set that you like. Download the set and then pick out the icons you need (twitter, facebook, rss, etc). Upload your icons to your site or where you keep your images for your blog. Grab the URL of each icon.

Are you ready to quickly learn some basic HTML? I’m using twitter as an example but you will use this for each of your icons.

Step 1: Start with the url of your image:

http://www.you.com/yourimage.png

Step 2: Adding the image code:

<img src="http://www.you.com/yourimage.png" alt="Follow Me">

Note the alt tag. This is good html practice and SEO friendly.

Step 3: Adding your link:

<a href="http://www.twitter.com/YOU" title="Follow me"><img src="http://www.you.com/yourimage.png"></a>

Note the title tag. This is also good html practice and SEO friendly.

Step 4: Repeat for each of your social networks. And your code should look similar to this example:

 

<a href="http://www.twitter.com/YOU" title="Follow me"><img src="http://www.you.com/yourimage.png"></a>
<a href="http://www.facebook.com/YOU" title="Like me"><img src="http://www.you.com/yourimage.png"></a>
<a href="http://www.YOURURL.com/YOURRSS" title="Subscribe to"><img src="http://www.you.com/yourimage.png"></a>

 

 

Now that you have your html code how do you add it to your site? If you are on WP you go into your widgets and add a text widget to your sidebar and enter your text. Blogger same idea only you use an html gadget on your sidebar.

I hope this was helpful to you and that you find some great, amazing and beautiful social icons for your site. If you were curious the set I use on my personal blog is from Productive Dreams and is called Page Peel. If you try this out I would love to see it on your site so add your link to a comment! Or if you found an icon set that you really love share it with me, I’d love to see it!

[box type=”info” style=”rounded” border=”full”]Originally posted on my blog at Uniquehorn Designs, but that blog will be closing and moving to PepperScraps.[/box]

Photo by webtreats