title: How to make a circle with CSS3 around font-awesome icon?
body: <p>I want to make a css3 circle around the icon that I want to draw. I am using the meyers reset before any other css: <a href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel="nofollow">http://meyerweb.com/eric/tools/css/reset/reset.css</a></p>
  
  <p>and I am unable to get the effect I want. This is my css:</p>
  
  <pre><code>i {
    display: inline-block;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 50px;
    -moz-box-shadow: 0px 0px 2px #888;
    -webkit-box-shadow: 0px 0px 2px #888;
    box-shadow: 0px 0px 2px #888;
  border: 3px solid red;
  }
  
  &lt;i&gt;H&lt;/i&gt;
  </code></pre>
  
  <p>If possible to make this responsive. What is the best way to do this? 
  If possible, it would be nice to have the circle and text resize on its own as the user resizes</p>