How To – Social Media Icons

I won’t start this post by saying how big social media has gotten in today’s world. And I won’t talk about how everybody and their grandma have a facebook and twitter account. I won’t do those things… But I will show you how to post your own cool social media icons onto your blog/website. After following these steps you should end up with something that looks similar to this…
div.socialPost > img { opacity: .85; } div.socialPost > img:hover { opacity: 1; }

The first step is to get yourself some fancy social media icons. There are many good offerings out there, but one that I recommend is the Socialico font [get it here]. It’s a font where each key on your keyboard represents a different social media icon. This makes it easy to load up a text document and find whatever buttons and colors you may need. Just keep in mind that not included in the font are icons for instagram and email.

A quick google search will show you how to turn each icon into an image but long story short…

  1. Open a new blank image in your image editor of choice
  2. Pick a color and insert the icon of your choice
  3. Make the image background transparent
  4. Save as a new image (jpg, png, etc..)
  5. Upload to an image hosting site like google photos

After you have uploaded all of the icons that you want, grab their URLs and then we can continue to the next step.

Now that the hard work is done, you can add the icons to your blog. Go ahead and add a new HTML widget to your blog layout (or whatever equivalent if you don’t use blogger). Inside the widget post the following code…

HTML / CSS
  
facebook


twitter


rss

 

div.socialContainer> img {
opacity: .85;
}

div.socialContainer> img:hover {
opacity: 1;
}

You have to replace 3 parts of the code above before clicking save.

  1. Replace “http://yourLink.com” with whatever the URL you want to link to for each icon. For example, your facebook icon will link to your facebook home page.
  2. Replace “http://yourImageUrl.png” with the image URLs that you copied earlier.
  3. Replace the alt text with it’s corresponding social icon type.

Once you click save, you should have some icons on your blog that look similar to the ones above.

How To Maintain Your Social Media Icons

Each “” tag in the HTML above defines a link which is closed by it’s following “” tag. and the “” tag within defines that the image to display. If you want to add social media icons from this group, copy one of the starting “” tags to it’s closing “” tag and then change the links and alt text like you did before.

If you want to remove an icon, it’s as simple as just removing the “” tag to it’s closing “” tag.

Advertisements