title: How to center an icon in a circular background
body: <p>I am trying to create a circular background around an icon (fontawesome 4.0).</p>
  
  <p>Consider the following code:</p>
  
  <pre><code>&lt;span class="participant img-circle"&gt;&lt;i class="fa fa-user" data-original-title="" title=""&gt;&lt;/i&gt;&lt;/span&gt;
  
  .participant{
      background: @gray-light;
      display: inline-block;
      width: 100px;
      height: 100px;
  }
  
  .participant i {
      font-size: 50px;
  }
  </code></pre>
  
  <p>This creates the background fine, but the icon is not centered in the circle. What am I doing wrong?</p>