Add social icons to your website using CSS

Posted by Fahad Ibnay Heylaal on Sep 15th 2008, 06:51 - in CSS

This post will show you how to add social network icons to your website (linking to your profile) using CSS.

Preview

The CSS

  1.  
  2. /* optional css */
  3. body {
  4.   font-family: arial; }
  5.  
  6. a {
  7.   font-size: 14px;
  8.   font-weight: bold;
  9.   text-decoration: none;
  10. }
  11. /* optional css */
  12.  
  13. ul.icons,
  14. ul.icons li{
  15.   border:0;
  16.   margin:0;
  17.   padding:0;
  18.   list-style:none;
  19. }
  20.  
  21. ul.icons li{
  22.   display:block;
  23.   padding:2px 0;
  24.   padding-left:20px;
  25. }
  26.  
  27. .icon {
  28.   background: left 5px no-repeat;
  29. }
  30.  
  31. div.icon {
  32.   vertical-align: middle;
  33. }
  34.  
  35. div.icon a {
  36.   display: block;
  37.   padding: 5px 0px 0px 20px;
  38. }
  39.  
  40. .digg { background-image:url(http://digg.com/favicon.ico);}
  41. .delicious{ background-image:url(http://delicious.com/favicon.ico);}
  42. .flickr{background-image:url(http://flickr.com/favicon.ico);}
  43. .facebook{background-image:url(http://facebook.com/favicon.ico);}
  44. .technorati{background-image:url(http://technorati.com/favicon.ico);}
  45. .twitter{background-image:url(http://twitter.com/favicon.ico);}
  46. .stumbleupon{background-image:url(http://stumbleupon.com/favicon.ico);}
  47.  
  48.  

Usage example 1

You can use an ordered list (ul) to list your profiles.

  1. <ul class="icons">
  2.   <li class="icon delicious">
  3.     <a href="http://delicious.com">delicious</a>
  4.   </li>
  5.   <li class="icon digg">
  6.     <a href="http://digg.com">digg</a>
  7.   </li>
  8.   <li class="icon technorati">
  9.     <a href="http://technorati.com">technorati</a>
  10.   </li>
  11.   <li class="icon flickr">
  12.     <a href="http://flickr.com">flickr</a>
  13.   </li>
  14.   <li class="icon facebook">
  15.     <a href="http://facebook.com">facebook</a>
  16.   </li>
  17.   <li class="icon twitter">
  18.     <a href="http://twitter.com">twitter</a>
  19.   </li>
  20. </ul>

Usage example 2

It is also possible to use simple DIVs if you want to avoid lists.

  1. <div class="icon digg">
  2.   <a href="http://digg.com">digg</a>
  3. </div>
  4.  
  5. <div class="icon twitter">
  6.   <a href="http://twitter.com/fahad19">my twitter</a>
  7. </div>

There are hundreds (or more) social networks online. I will try to add more later. If you want your favourite one to be added, then please suggest here.

Share: