title: creating space between font awesome icon rows with css
body: <p>I've got a selection part where I have multiple font Awesome icons and the selected one has a bar underneath it.
  That goes alright as long as I only have 1 row of icons. When I have multiple rows the "selected bar" is not visible anymore as the icon underneath is hiding it.
  I'm not very strong in css and tried all the padding and margins I could think of but without much success. In the attached jsfiddle you can see the selector for the last two icons, but not for the first one.</p>
  
  <p>What should I add to the css below so that I can have multiple rows of icons and still see the selector bar?</p>
  
  <pre><code>.icon-picker {
     border: 0px solid #000000;
     margin-right: 5px;
     width: 24px;
     height: 24px;
     background-color: #FFFFFF;
     padding-bottom: 4px;
  }
  
  .selected {
     border-left: 0px;
     border-right: 0px;
     border-top: 0px;
     border-bottom: 2px solid #000000;
  }
  
  .icon-container {
     display: inline-block;
     vertical-align: middle;
     padding-top: 4px;
     padding-left: 15px;
     max-width: 300px;
  }
  </code></pre>
  
  <p>Thanks for your time.</p>
  
  <p><a href="http://jsfiddle.net/ePcq7/" rel="nofollow">jsfiddle</a></p>