title: How can I display social icons on my website with HTML and CSS?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>In my HTML file:</p>
  
  <pre><code>&lt;div class="icons"&gt;
      &lt;div class="email"&gt;&lt;a href="mailto: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;
  </code></pre>
  
  <p>In my CSS:</p>
  
  <pre><code>.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; }
  </code></pre>
  
  <p>NOTE: This code did not work for me. </p>