Adding social icons to your website using CSS is simply another variation on the navigation menu with icons theme. First, we need a basic unordered list like this:
<ul id="social"> <li><a href="#" id="facebook">Facebook</a></li> <li><a href="#" id="twitter">Twitter</a></li> <li><a href="#" id="myspace">My Space</a></li> <li><a href="#" id="feed">Feed</a></li> </ul>
Each link has a different ID in order to insert a different background image on each item. We also want to add a dynamic effect on hove. Here's the CSS:
body {
width: 60%;
margin: 0 auto;
padding: 2em 0;
background: #fff;
color: #333;
font: 76% Arial, sans-serif;
}
#social {
width: 100%;
font-size: 1.1em;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
#social li {
float: left;
height: 100%;
margin-right: 4px;
}
#social li a {
float: left;
display: block;
padding: 0 10px;
color: #555;
font-weight: bold;
text-decoration: none;
background-color: transparent;
background-repeat: no-repeat;
background-position: 50% 0;
height: 100%;
line-height: 5;
}
#social li a#facebook {
background-image: url("img/facebook-gray.png");
}
#social li a#facebook:hover {
background-image: url("img/facebook.png");
}
#social li a#twitter {
background-image: url("img/twitter-gray.png");
}
#social li a#twitter:hover {
background-image: url("img/twitter.png");
}
#social li a#myspace {
background-image: url("img/myspace-gray.png");
}
#social li a#myspace:hover {
background-image: url("img/myspace.png");
}
#social li a#feed {
background-image: url("img/rss-gray.png");
}
#social li a#feed:hover {
background-image: url("img/rss.png");
}
The textual content of each link has been positioned just under the icon by means of the line-height property. Also, the background image has been centered by using the background-position: 50% 0 declaration. You can see the final result here.
Note
You can improve the overall performance of your CSS code by using CSS sprites. For the sake of simplicity, I've omitted such an eventuality.