How can I display social icons on my website with HTML and CSS?

Question

I am desperately trying to add some icons to my website but can't get them appear properly. What I want is just a container that contains images and display them in line. Then I would want to add some padding to that container and in between the images and that's it.

See here my approach. If anyone can help me out and correct my code so that it actually works, I would be more than happy.

In my HTML file:

<div class="icons">
    <div class="email"><a href="mailto:example@hotmail.com" title="email"></a></div>
    <div class="twitter"><a href="http://www.twitter.com" title="twitter">twitter</a>    
</div>

In my CSS:

.icons {
    margin-left:30px;
}

.icons .email { background: url(../images/social/email.png) left top no-repeat; }
.icons .twitter { background: url(../images/social/twitter.png) left top no-repeat; }

NOTE: This code did not work for me.

Answer 1

I would create an image sprite for my icons. And then for the markup I would use a list and set the icon images as background images to their respective anchor tags... Something like this...

HTML

<ul>
<li><a href="" class="icon facebook">Facebook</a></li>
<li><a href="" class="icon twitter">Twitter</a></li>
<li><a href="" class="icon googleplus">Google Plus</a></li>
</ul>

CSS

ul li {
float:left;
display:block;
}

.icon {
width:25px;
height:25px;
display:block;
text-indent:-9999px;
background-image:url(http://tridentdesign.com/wp-content/uploads/2012/12/gemicon.jpg);
background-repeat:no-repeat;
}

.facebook {
background-position:-140px -115px;
}
.twitter {
background-position:-185px -115px;
}
.googleplus {
background-position:-140px -265px;
}

HERE IS A FIDDLE TO DEMONSTRATE:

http://jsfiddle.net/Z8zkK/2/

Edit: I updated my css to match my fiddle.

Answer 2

When you are adding an image in CSS you should add atleast Height or width, it's good to add both, you can ignore(not necessarily) when you are adding images using img tag.

To get in inline, as you are using div, add float:left to .icons class

 .icons {
  margin-left:30px;
  float:left;
  width:50px;
  height:50px;
  }

You can also use the answer by Kris Hollenbeck, in that case you have to rewrite you HTML code too, which is highly preferred.

Answer 3

this is social widget demo http://www.tech-fans.com/p/socialbox.html

you can get it from here http://www.tech-fans.com/2013/03/socialbox.html