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

I'm trying hard to add some icons to my website, but they can not be displayed properly. What I want is just a container in which the images are included and display them in line, then I would like to add some padding between the containers and some pictures and this is it.

View my view here

In my HTML file:

  
 div class = "mouse" & gt; & Lt; Div class = "email" & gt; & Lt; A href = "mail: example: @ hotmail.com" title = "email" & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "twitter" & gt; & Lt; A href = "http://www.twitter.com" title = "Twitter" & gt; Twitter & lt; / A & gt; & Lt; / Div & gt;   
 In my CSS:  
  .ics (margin-left: 30px;) .onjan .mail {background: url (../images / social / Email Page) Top left on top;} .con .tit (background: url (../images/social/ twitter) left top header;}   
 Note: This code I do not work for me.   
 
 
 I will create an image sprite for my icons and then for markup i I will use a list and icon image  
  HTML     & quot; Lt; ul & gt; & lt; li & gt; & lt; a href = "class =" icon facebook "& gt; Facebook & lt; / a & gt; & lt; / li & gt; & lt; Li & gt; & lt; a href = "class =" icon twitter "> gt; Twitter & lt; / a & gt; & lt; / li & gt; & lt; li & gt; & lt; a href = "" Class = "icon Guptles"> Google plus      
 < Strong> CSS   
  ul li {float: left; Display area; } .con {width: 25px; Height: 25px; Display area; Text Indent: -9999px; Background Image: URL (http://tridentdesign.com/wp-content/uploads/2012/12/gemicon.jpg); Background repeat: do not repeat; } .facebook {background-position: -140px-115px; } .tit {background-position: -185 px-115px; } .googleplus {background-position: -140px-265px; } There is a feed here to demostrate:   
  
  Edit:   
  Strong> <